无法将对象保存在数组中

时间:2019-11-21 14:35:13

标签: javascript reactjs

我有一个对象数组状态,我想在其中保存选中的复选框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>
  );
}

2 个答案:

答案 0 :(得分:1)

您不能依赖于以下功能:

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

具有访问新状态的权限,这是因为setState函数是异步,因此您尝试用console.log记录可能尚未设置的值。因此,您需要使用生命周期方法或将answers作为依赖项的useEffect钩子(第二个参数需要一个数组,如[answers])。

useEffect在首次渲染后以及渲染后的答案状态更改中运行

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

答案 1 :(得分:0)

像这样更改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