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的反应也是不可变的，因此它们永远不会改变。如果要登录到新阵列，可以使用useEffect函数。

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

通过表单输入更新状态

1 个答案: