通过表单输入更新状态

Question

我已经构建了一个闪存卡应用程序来帮助保留编程概念。通过点击按钮，用户可以翻转“闪存卡”以查看他们是否正确猜到了这个概念和/或转到下一张卡片。还有一个按钮允许用户添加新的闪存卡。

点击添加按钮后，用户会被带到一个表单页面，他们可以在其中输入他们需要记住的新编程概念及其定义/解释。提交后，该表单（用于生成闪存卡的数组）应使用来自用户的新输入进行更新。但是，这不会立即发生。目前，在提交时，表单似乎以某种方式存储用户输入，但该信息仅在第二次单击时才会添加到适当的数组中。有人可以帮我解决这个问题吗？我添加了控制台的屏幕截图来说明我的意思。

第一次点击会记录一个包含 12 项的数组，也就是 state 中数组的长度。它应该已将用户输入添加到数组并记录了 13 个项目。当我再次单击时，它记录了 13 个项目，表明数组已更新状态。

这是表单组件的代码：

const AddForm = props => {
    // console.log(props.stateConceptArray);
    const [newConcept, setNewConcept] = useState({ term: '', definition: '' });

    const handleChanges = e => {
       setNewConcept({
           ...newConcept,
           [e.target.name]: e.target.value
       });
       console.log(newConcept);
    }

    const handleSubmit = (e, obj) => {
        e.preventDefault();
        props.setStateConceptArray([
            ...props.stateConceptArray,
            obj
        ]);
        document.addForm.reset();
        console.log(props.stateConceptArray);
    }

    return (

        <form name="addForm" onSubmit={e => handleSubmit(e, newConcept)}>
            <label> New Term: <input type="text" name="term" placeholder="add new term" onChange={handleChanges} /></label>
            <br />
            <label>New Defintion: <input type="text" name="definition" placeholder="add new definition" onChange={handleChanges} /></label>
            <br />
            <button type="submit">Add</button>
        </form>
    )
}

export default AddForm;

Answer 1

setState 是异步的，因此 state 不会立即更新，但 props 在 react 中是不可变的，因此它们永远不会改变。如果要登录到新数组，可以使用 useEffect 函数。

const { stateConceptArray } = props;
useEffect(() => {
   console.log(stateConceptArray);
}, [stateConceptArray]);