Reactjs useffect not updating usestate

Question

>我有一个使用效果，它应该保持按钮禁用，直到单击表格上的一行，然后按钮将是可点击的。由于某种原因，它不会更新状态。我将控制台日志放在使用效果的"if"部分，以检查它甚至达到了那个位，控制台日志打印正常，所以我不确定为什么按钮不会改变。

const [disabledSubmitFormButton, setDisabledSubmitFormButton] = useState(false)
const [selectedOptions, setSelectedOptions] = useState([{
name: '',
age: '',
city: '',
}])

useEffect(() => {
if (selectedOptions.length > 0) {
setDisabledSubmitFormButton(false)
console.log("hiiii")
} else {
setDisabledSubmitFormButton(true)
}
}, [selectedOptions])

按钮正在侦听提交表单按钮状态，如下所示 -

<Button disabled={submitFormButton}>Submit</Button>

我有一个包含行的表格，当用户在表格中选择一行时，这是按钮应该变为可单击且未被禁用的时候。当用户单击离开表格时，应再次禁用该按钮。

<DataTable value={optionsContext.list} header={header} sortField="id" sortOrder={-1} globalFilter={globalFilter} selectionMode="multiple"
selection={selectedOptions} onSelectionChange={e => setSelectedOptions(e.value)}>
<Column className="table-column" field="name" header="Name" sortable filter filterPlaceholder="Search by Name" />

etc. 

Answer 1

请注意，在 useImpact 的依赖项数组中selectedOptions。 这意味着它将在组件初始化时运行一次，并且在selectedOptions更改之前永远不会再次运行。这就是为什么您可以一次性查看控制台日志的原因。

useEffect(() => {
if (selectedOptions.length > 0) {
setSubmitFormButton(true)
console.log("hiiii")
} else {
setSubmitFormButton(false)
}
}, [selectedOptions]) // <-- here it is

所以我假设当用户单击选项时，您实际上不会更改它们，也不会更改数组selectedOptions和 item，但对数组的引用仍然相同，因此 React 不会将其视为更改。为了在这种情况下正确触发反应，您需要使用新数组更新selectedOptions状态。

例如，您的handleClick函数可能如下所示：

handleClick() {
setSelectedOptions([...selectedOptions]) // <-- new array is passed 
}

请注意，在上面的例子中，我只是用具有相同内容的新数组替换数组。在实际应用程序中，您可能需要更新内部的项目，因此您可以使用.map()方法或任何其他方法，该方法将返回包含更新项目的新数组。

Answer 2

只需创建一个这样的函数并将其传递到您想要调用它的地方。

const aFunction = () => {
..
..
.. // make the changes
setSubmitFormButton(false or true);
}