无法在数组中保存对象

Question

我有一个对象数组的状态，我想将选中的复选框 id 保存在里面。以...的形式[  {   name: 'Question 1',   checked: '1,2' // so 1 and 2 was checked }]但是使用以下代码，当我取消选中复选框时，我的状态要么是空的对象数组，要么在数组中仅包含一个对象。  const { id, answer } = props.answers;  const [answers, setAnswers] = useState([{}]);  function handleChange(e) {    setAnswers([{ name: e.target.name, checked: e.target.value }]);    console.log(answers); // empty when i check checkbox, gets filled after unchecking  }  return (    <Answer>      <label>        <input          type="checkbox"          name={answer}          value={id}          defaultChecked={false}          onChange={handleChange}        />        {answer}      </label>    </Answer>  );}

Answer 1

您不能依赖以下功能：

function handleChange(e) {

    setAnswers([{ name: e.target.name, checked: e.target.value }]);

    console.log(answers); 

  } 

要访问新状态，这是因为该setState函数是异步的，因此您正在尝试 console.log 一个可能尚未设置的值。因此，您需要使用生命周期方法或 useEffect 挂钩answers作为依赖项（第二个参数需要一个数组 so as [answers]）。

useEffect 在第一次渲染和渲染答案状态更改之后运行

useEffect(() => {

 console.log(answers) // get my new expected value of answers

}, [answers]) 

Answer 2

useEffectanswers像这样更改时将重新运行：

import react, {useState, useEffect} from 'react';

const [answers, setAnswers] = useState([{}]);

 handleChange = e =>{

    setAnswers([{ name: e.target.name, checked: e.target.value }]);

  }

  useEffect(() => {

     console.log(answers); //get the updated state here

  }, [answers]);