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