javascript - 通过表单输入更新状态

Question

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

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

第一次单击会记录一个包含 12 个项目的数组，这是状态数组的长度。它应该将用户输入添加到数组中并记录 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 是异步的，因此状态不会立即更新，而且 props 在 React 中也是不可变的，因此它们永远不会改变。如果你想记录到新数组，你可以使用 useEffect 函数。

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