Javascript 如何在React js中映射对象数组

我正在尝试将从API调用获得的数组映射到状态。实际上，它以正确的计数映射数组元素。然而，我只得到数组n倍的第1个元素（数组的n个长度）。我哪里做错了

export default class NewCalendarView extends Component {
  componentDidMount() {
    API.getLectures().then((res)=>{
      console.log(res)
       let cal=res.map((lec)=>{
        let lecture={
        title: lec.subjectName,
        startDate : moment(lec.dateHour).toDate(),
        endDate:  moment(lec.dateHour).toDate()
        }  
        console.log("lec "+ JSON.stringify(lecture));
        return lecture;
             })
          this.setState({events:cal,loading:null,serverErr:null})
    }).catch((err)=>{
        this.setState({serverErr:true,loading:null})
    })
}
  constructor(props) {
    super(props);

    this.state = {
       events: []
    }
  }
  render() {
    return (
      <div style={{
        flex: 1
      }}>

        <Calendar
          localizer={localizer}
          events={this.state.events}
          startAccessor='startDate'
          endAccessor='endDate'
          views={['month', 'week', 'day']}
          culture='en'
          />
      </div>
    );
  }
}

---

看起来res对象中不存在您试图访问的

键。尝试按下面的定义替换键，这可能会有所帮助

有时匹配云和应用程序中的参数可能会令人困惑，尤其是在
camelCase
和
kebab-case
约定的情况下

let lecture= {
    title: lec.subject,
    startDate : moment(lec.date).toDate(),
    endDate:  moment(lec.date).toDate()
    }  

看起来res对象中不存在您试图访问的
键。尝试按下面的定义替换键，这可能会有所帮助

有时匹配云和应用程序中的参数可能会令人困惑，尤其是在
camelCase
和
kebab-case
约定的情况下

let lecture= {
    title: lec.subject,
    startDate : moment(lec.date).toDate(),
    endDate:  moment(lec.date).toDate()
    }  

我建议删除这段代码-

 let cal=res.map((lec)=>{
    let lecture={
    title: lec.subjectName,
    startDate : moment(lec.dateHour).toDate(),
    endDate:  moment(lec.dateHour).toDate()
    }  
    console.log("lec "+ JSON.stringify(lecture));
    return lecture;
         })

就这么做吧-

this.setState({events:JSON.stringy(res),loading:null,serverErr:null})

我还注意到没有唯一的
键
，这就是为什么它总是第一个对象重复n次

无论如何，我注意到Talha Azhar在我输入答案时已经回答了，他的回答肯定会有帮助，你也可以尝试执行我上面的建议，这也会减少你的代码。
我建议删除这段代码-

 let cal=res.map((lec)=>{
    let lecture={
    title: lec.subjectName,
    startDate : moment(lec.dateHour).toDate(),
    endDate:  moment(lec.dateHour).toDate()
    }  
    console.log("lec "+ JSON.stringify(lecture));
    return lecture;
         })

就这么做吧-

this.setState({events:JSON.stringy(res),loading:null,serverErr:null})

我还注意到没有唯一的
键
，这就是为什么它总是第一个对象重复n次

无论如何，我注意到Talha Azhar在我键入答案时已经回答了，他的回答肯定会有帮助，而且你可以尝试执行我上面的建议，这也会减少你的代码。
你映射的属性在你的回答中不存在。您应该存储
eid
以将其用作键

我还建议您使用更惯用的方法，使用函数组件和挂钩

您可以像这样重写组件：

function NewCalendarView() {
  const [serverErr, setServerErr] = useState();
  const [loading, setLoading] = useState();
  const [events, setEvents] = useState();

  useEffect(() => {
    (async () => {
      try {
        const lectures = await API.getLectures();

        const cal = lectures.map(({ lectureId, subject, date }) => ({
          id: lectureId,
          title: subject,
          startDate: moment(date).toDate(),
          endDate: moment(date).toDate()
        }));

        setEvents(cal);
        setServerErr(null);
      } catch (e) {
        setEvents();
        setServerErr(true);
      }
      setLoading(null);
    })();
  }, []);

  return (
    <div
      style={{
        flex: 1
      }}
    >
      <Calendar
        localizer={localizer}
        events={events}
        startAccessor="startDate"
        endAccessor="endDate"
        views={["month", "week", "day"]}
        culture="en"
      />
    </div>
  );
}

函数NewCalendarView（）{
const[serverErr，setServerErr]=useState（）；
const[loading，setLoading]=useState（）；
const[events，setEvents]=useState（）；
useffect（（）=>{
（异步（）=>{
试一试{
const touctions=等待API.gettouctions（）；
const-cal=讲座.map（{讲师ID，主题，日期}）=>({
id:，
标题：主题，
startDate:时刻（日期）.toDate（），
endDate:时刻（日期）.toDate（）
}));
设置事件（cal）；
设置服务器错误（null）；
}捕获（e）{
setEvents（）；
设置服务器错误（true）；
}
设置加载（空）；
})();
}, []);
返回(
);
}

我在这个沙盒中放了一个函数版本：
您正在映射响应中不存在的属性。您应该存储
eid
以将其用作键

我还建议您使用更惯用的方法，使用函数组件和挂钩

您可以像这样重写组件：

function NewCalendarView() {
  const [serverErr, setServerErr] = useState();
  const [loading, setLoading] = useState();
  const [events, setEvents] = useState();

  useEffect(() => {
    (async () => {
      try {
        const lectures = await API.getLectures();

        const cal = lectures.map(({ lectureId, subject, date }) => ({
          id: lectureId,
          title: subject,
          startDate: moment(date).toDate(),
          endDate: moment(date).toDate()
        }));

        setEvents(cal);
        setServerErr(null);
      } catch (e) {
        setEvents();
        setServerErr(true);
      }
      setLoading(null);
    })();
  }, []);

  return (
    <div
      style={{
        flex: 1
      }}
    >
      <Calendar
        localizer={localizer}
        events={events}
        startAccessor="startDate"
        endAccessor="endDate"
        views={["month", "week", "day"]}
        culture="en"
      />
    </div>
  );
}

函数NewCalendarView（）{
const[serverErr，setServerErr]=useState（）；
const[loading，setLoading]=useState（）；
const[events，setEvents]=useState（）；
useffect（（）=>{
（异步（）=>{
试一试{
const touctions=等待API.gettouctions（）；
const-cal=讲座.map（{讲师ID，主题，日期}）=>({
id:，
标题：主题，
startDate:时刻（日期）.toDate（），
endDate:时刻（日期）.toDate（）
}));
设置事件（cal）；
设置服务器错误（null）；
}捕获（e）{
setEvents（）；
设置服务器错误（true）；
}
设置加载（空）；
})();
}, []);
返回(
);
}

我在这个沙盒中放置了一个功能版本：
您是否有可能从控制台共享日志。日志（res）是的，我添加到了日志。您是否有可能从控制台共享日志。日志（res）是的，我添加到了日志是的，我混淆了参数名称。非常感谢。是的，我混淆了参数名称。谢谢。