Javascript 无法读取属性'；地图'；使用axios.get-inside useEffect钩子时出现未定义错误

这是我下面给出的编辑练习组件。因此，在我的练习组件中，当我单击 编辑要根据其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
   
 

从“反应日期选择器”导入日期选择器；
导入“react datepicker/dist/react datepicker.css”；
从“axios”导入axios；
常量编辑练习=（道具）=>{
const[userDetails，setUserDetails]=useState({
用户名：“”，
说明：“，
持续时间：0，
日期：新日期（），
用户：[]，
});
useEffect（（）=>{//这是从后端获取的
axios
.get（“http://localhost:5000/exercises/“+props.match.params.id）
。然后（res=>{
setUserDetails({
用户名：res.data.username，
描述：res.data.description，
持续时间：res.data.duration，
日期：新日期（res.data.date），
})
})        
.catch（（错误）=>{
控制台日志（err）；
});
axios
.get（“http://localhost:5000/users/")
。然后（（res）=>{
如果（res.data.length>0）{
setUserDetails({
用户：res.data.map（（用户）=>user.username），
});
}
})
.catch（（错误）=>{
控制台日志（err）；
});
}，[props.match.params.id]）；
const changeUsernameHandler=（e）=>{
setUserDetails（（prevState）=>{
返回{
…国家，
用户名：e.target.value，
};
});
};
常量changeDescriptionHandler=（e）=>{
setUserDetails（（prevState）=>{
返回{
…国家，
说明：即目标值，
};
});
};
常量changeDurationHandler=（e）=>{
setUserDetails（（prevState）=>{
返回{
…国家，
持续时间：即目标值，
};
});
};
const changeDateHandler=（日期）=>{
setUserDetails（（prevState）=>{
返回{
…国家，
日期:日期:，
};
});
};
const onSubmitHandler=（e）=>{//提交时，此代码将运行
e、 预防默认值（）；
常量练习={
用户名：userDetails.username，
description:userDetails.description，
持续时间：userDetails.duration，
日期：userDetails.date，
};
控制台日志（练习）；
axios
.post（“http://localhost:5000/exercises/update/“+props.match.params.id，练习）
。然后（（res）=>console.log（res.data））；
window.location=“/”；
};
返回(
编辑练习日志
用户名：
{userDetails.users.map（（用户）=>{
返回(
{user}
);
})}
说明：
持续时间（分钟）：
日期：
);
};
导出默认编辑练习```
>请建议如何呈现“编辑练习”组件

无法读取未定义的属性“map”

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

---

检查您是否从

获取http://localhost:5000/users/“

实际上返回一个数组响应。我怀疑

res.data

是

undefined

一个你正在调用的

map

是的，我正在获取一个用户数组，我正在从练习和用户API端点获取数据，但是在对useEffect中的setUserDetails函数进行注释之后，我的组件在不更改状态的情况下仍被渲染。我无法编辑练习列表。这就是问题所在。您是否尝试过此解决方案？是的，尝试后我发现了错误，因为我的用户名显示为blanked。请尝试这些解决方案。

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

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);
      });