反应useState和setState声明calendarList.push不是函数

Question

React的新手。我正在尝试保持跟踪日历事件数组的状态。我将状态设置为等于dummyData，如果将新的日历事件传递给UserEvents（props），则要将其添加到calendarList状态。

给出一个错误，原因是calendarList.push（）不是函数。当我console.log它时，它是一个数组，所以我不明白为什么我不能在它上使用push（）方法。

import React, { useEffect, useState } from 'react';
import Countdown from '../countdown/Countdown';

function UserEvents(props){
    let dummyData = [
        {name: "birthday", date: '03/20/2021'},
        {name: "christmas", date: '12/25/2020'},
        {name: "thanksgiving", date: '11/26/2020'}
      ]
    
    const [calendarList, setCalendarList] = useState(dummyData);
  
    if(props.calendarItem){
        setCalendarList(calendarList.push( props.calendarItem ));
    }

    return (
        <div className="App">
          {
            calendarList.map((item, index) => {
              return(
                <Countdown name={item.name} date={item.date}></Countdown>
              )  
            })
          }
        </div> 
      )
}

export default UserEvents; 

如果console.log（calendarList）显示其对象，但也会显示“ 4”。如您所见，它会执行两次此操作，我也不确定为什么。

Answer 1

.push有2个问题：

• 它返回数组的新长度，所以

setCalendarList(calendarList.push( props.calendarItem ));

将执行类似setCalendarList(4)

的操作

• 它会改变现有的数组（React中不会改变状态）

您还在每个渲染器上无条件调用setCalendarList。

对其进行更改，以使初始状态包括calendarItem：

const [calendarList, setCalendarList] = useState([
  ...dummyData,
  ...(props.calendarItem ? [props.calendarItem] : [])
]);

（请参见Add elements inside Array conditionally in JavaScript）

您也可以使用原始代码，但请使用效果钩子代替if：

useEffect(() => {
  if (props.calendarItem) {
    setCalendarList([
      ...calendarList,
      props.calendarItem
    ]);
  }
}, []);