Question

我正在创建一个用户界面来创建测验。用户可以添加问题，并且可以在每个问题内添加/删除问题的选择。

我有一个名为CreateQuizPage的组件，该组件管理状态。问题以[{questionText：“这是我的问题”，“选择项：[”选择A ...“，”选择B“，..”的形式存储在“数据”（我正在使用useState（）挂钩）中。。]}，...]

问题和选择在我的组件CreateQuestionPanel中呈现

在CreateQuizPage级别上，我定义“ addChoiceHandler（idx）”（其中idx是要为其添加选择的问题的索引）：

const addChoiceHandler = (idx) => {
    setData(prev => [...prev.slice(0, idx), { ...prev[idx], choices: prev[idx].choices.concat([""]) }, ...prev.slice(idx + 1)])
}

此函数向下传递到CreateQuestionPanel级别，在该级别上，该函数绑定到onClick的“添加选择”按钮。

<Button basic compact onClick={() => addChoiceHandler(id)}>Add</Button>

也在CreateQuestionPanel级别上，我为问题提供了选择：

{
                    choices.map((item, choiceIdx) => {
                        return (
                            <Form.Field key={choiceIdx} >
                                <input
                                    value={item}
                                    name={choiceIdx}
                                    onChange={e => onChoiceTextChange(id, choiceIdx, e.target.value)}
                                    placeholder="Enter choice..."
                                />
                            </Form.Field>
                        )
                    })
                }

当我在严格模式下单击添加选择按钮时，useState钩子（setData）将触发两次，单击时呈现两个选择。我读到useState挂钩在严格模式下触发两次以检测副作用。这是否意味着我使用状态不正确？如果我关闭严格模式，则它可以正常工作-但是，我想确保自己正在正确修改状态。

我不应该在useState挂钩内的选择数组中添加元素，而是应该在面板级别上构造一个带有额外项目的数组并将其传递给useData？

以严格模式反应组件的双重渲染-我是否正确使用状态？

0 个答案: