你能在useEffect中使用array.push吗？反应挂钩

Question

我正在尝试找出一种将对象添加到我的数组中的方法。这是代码。

export default function DashboardTable(props) {

    const { transactionData } = props;

    const classes = useStyles();

    const [transactionDataArray, setTransactionDataArray] = useState([])

 

  useEffect(() => {

    setTransactionDataArray(transactionDataArray.push(transactionData))

  }, [transactionData])

    console.log(transactionDataArray);

transactionData 返回对象（对象的数量是可变的，具体取决于后端事务。）我想将对象添加到数组中，transactionDataArray但我不断收到错误消息transactionDataArray is not a function。我哪里错了？

Answer 1

是的，您可以在 useEffect 中使用推送，但不能在状态上使用。反应状态不能直接改变。作为一个状态，您不能直接推送或编辑状态数据transactionDataArray。但是借助setTransactionDataArray功能，您可以更改/设置状态值。因此，要向旧状态添加新值，您必须解构旧状态并添加新值，如下所示setTransactionDataArray([...transactionDataArray, transactionData])或者您可以像下面那样通过创建新变量分配状态值然后将新值推送到变量并最后设置状态const data = transactionDataArray;data.push(transactionData);setTransactionDataArray(data);

Answer 2

要将数据添加到您的本地状态，您不必使用推送，而只需使用“setTransactionDataArray”，因为这是将数据添加到状态的函数。所以在你的useEffect  useEffect(() => {       setTransactionDataArray(transactionData)   }, [transactionData])或者，如果您想要一个包含数据的数组，那么稍后将该数组添加到状态，而不是您应该声明一个数组并向其中添加数据。然后当工作完成时，您可以在状态中添加该数组。