无法在数组中保存对象答案

【问题标题】：Can't save object inside array无法在数组中保存对象
【发布时间】：2020-03-17 12:45:53
【问题描述】：

我有一个对象数组的状态，我想将选中的复选框 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>
  );
}

【问题讨论】：

你能设置一个默认状态吗？

标签： javascript reactjs

【解决方案1】：

你不能依赖这样的函数：

function handleChange(e) {
    setAnswers([{ name: e.target.name, checked: e.target.value }]);
    console.log(answers); 
  }

要访问新状态，这是因为setState 函数是异步，因此您正在尝试控制台记录一个可能尚未设置的值。因此，您需要使用生命周期方法或将 answers 作为依赖关系的 useEffect 挂钩（第二个参数需要一个数组，例如 [answers]）。

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

useEffect(() => {
 console.log(answers) // get my new expected value of answers
}, [answers])

【讨论】：

你说我不能依赖上面的函数，你会怎么改变它，让它变得可靠？谢谢

【解决方案2】：

useEffect 将在 answers 像这样更改时重新运行：

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

更多信息请通过this

【讨论】：