在 useEffect 钩子中使用 axios.get 时，无法读取未定义错误的属性“map”

如何解决在 useEffect 钩子中使用 axios.get 时，无法读取未定义错误的属性“map”

这是我下面给出的编辑练习组件。所以在我点击的练习组件中 edit 要根据其 id 更新我的练习，它必须呈现给编辑练习组件 但在渲染时会出现上述错误。这是我供参考的组件。在这，在 useEffect 我正在从 URL 中获取具有给定 ID 的练习。

    import DatePicker from "react-datepicker";
    import "react-datepicker/dist/react-datepicker.css";
    import axios from "axios";

    const EditExercise = (props) => {
      const [userDetails,setUserDetails] = useState({
        username: "",description: "",duration: 0,date: new Date(),users: [],});
    
      useEffect(() => {                         //This is the getting from backend
        axios
         .get("http://localhost:5000/exercises/"+props.match.params.id)
          .then(res => {
            setUserDetails({
              username: res.data.username,description: res.data.description,duration: res.data.duration,date: new Date(res.data.date),})
         })        
          .catch((err) => {
              console.log(err);        
          });
    
        axios
          .get("http://localhost:5000/users/")
          .then((res) => {
            if (res.data.length > 0) {
              setUserDetails({
                users: res.data.map((user) => user.username),});
            }
          })
          .catch((err) => {
            console.log(err);
          });
        },[props.match.params.id]);
    
      const changeUsernameHandler = (e) => {
        setUserDetails((prevstate) => {
          return {
            ...prevstate,username: e.target.value,};
        });
      };
    
      const changeDescriptionHandler = (e) => {
        setUserDetails((prevstate) => {
          return {
            ...prevstate,description: e.target.value,};
        });
      };
    
      const changeDurationHandler = (e) => {
        setUserDetails((prevstate) => {
          return {
            ...prevstate,duration: e.target.value,};
        });
      };
    
      const changeDateHandler = (date) => {
        setUserDetails((prevstate) => {
          return {
            ...prevstate,date: date,};
        });
      };
    
      const onSubmitHandler = (e) => {                                //On submit this code will run
        e.preventDefault();
        const exercise = {
          username: userDetails.username,description: userDetails.description,duration: userDetails.duration,date: userDetails.date,};
        console.log(exercise);
    
        axios
          .post("http://localhost:5000/exercises/update/"+props.match.params.id,exercise)
          .then((res) => console.log(res.data));
    
        window.location = "/";
      };
    
      return (
        <div>
          <h3>Edit Exercise log</h3>
          <form onSubmit={onSubmitHandler}>
            <div className="form-group">
              <label>Username: </label>
              <select
                required
                className="form-control"
                onChange={changeUsernameHandler}
                value={userDetails.username}
              >
                {userDetails.users.map((user) => {
                  return (
                    <option key={user} value={user}>
                      {user}
                    </option>
                  );
                })}
              </select>
            </div>
            <div className="form-group">
              <label>Description: </label>
              <input
                type="text"
                required
                className="form-control"
                onChange={changeDescriptionHandler}
                value={userDetails.description}
              />
            </div>
            <div className="form-group">
              <label>Duration (in minutes): </label>
              <input
                type="number"
                className="form-control"
                onChange={changeDurationHandler}
                value={userDetails.duration}
              />
            </div>
            <div className="form-group">
              <label>Date: </label>
              <div>
                <DatePicker
                  onChange={changeDateHandler}
                  selected={userDetails.date}
                />
              </div>
            </div>
    
            <div>
              <input
                type="submit"
                value="Edit Exercise Log"
                className="btn btn-primary"
              />
            </div>
          </form>
        </div>
      );
    };
    
    export default EditExercise;```


 
>Please suggest what can be done to render the edit-exercise component
   
 

解决方法

无法读取未定义的属性'map'

抛出此错误是因为您尝试映射的数组不存在。在映射数组之前，请检查数组是否存在。 用户： res.data ？ res.data.map((user) => user.username) : [],还有

{userDetails.users && userDetails.users.map((user) => {
        return (
            <option key={user} value={user}>
                {user}
            </option>
            );
         })}

由于axios.get返回一个promise，并且setUserDetails是在promise返回后设置的，所以在触发useEffect时需要注意。当前 useEffect 会在 props.match.params.id 更改时触发。

有两种可能的解决方案： 或者，您可以从 props.match.params.id 第二个参数中删除 useEffect。

或者你可以在 useEffect 钩子之外的这个部分：

axios
      .get("http://localhost:5000/users/")
      .then((res) => {
        if (res.data.length > 0) {
          setUserDetails({
            users: res.data.map((user) => user.username),});
        }
      })
      .catch((err) => {
        console.log(err);
      });