React useState()数组未更新

Question

我使用React创建了新的自定义选择框。有一个预填充的数组，我正在加载组件(使用useEffect(。当用户搜索任何不存在的国家时，都可以选择添加。所以我用useState钩住了。代码如下：-

const [countries, setCountries] = useState([]);

国家列表：-

[
{"value": 1, "label": "Singapore"},
{"value": 2, "label": "Malaysia"},
{"value": 3, "label": "Indonesia"},
{"value": 4, "label": "Phillipines"},
{"value": 5, "label": "Thailand"},
{"value": 6, "label": "India"},
{"value": 7, "label": "Australia"},
{"value": 8, "label": "Pakistan"}
]

const handleHTTPRequest = () => {
service.getData() 
.then(res => {
setCountries(res);
})
.catch((err) => console.error(err))
}
useEffect(() => {
handleHTTPRequest()
})

我正在检查数组中搜索的国家，如果不存在，我只需添加数组

const addCountry = (country) => {
let isRecordExist = countries.filter(c => c.label === country).length > 0 ? true : false;
const obj = {
value: countries.length + 1,
label: country
}
let updatedVal = [...countries, obj]

setSelectedCountry(country)
if (!isRecordExist) {
**setCountries**(updatedVal) // updating array
}
}

问题是它没有更新，尽管我可以在updatedVal中看到数据。

完整代码在这里：-

https://github.com/ananddeepsingh/react-selectbox

Answer 1

问题似乎是，您正在将引用未更改的数组(updatedVal(传递给useState()，因此React认为您的数据没有被修改，它在不更新状态的情况下退出。

尝试删除不必要的变量并直接执行setCountries([...countries, obj])

我建议您对代码进行另一个小的修复：您可以使用Array.prototype.every()来确保每个现有项都有不同的label。与.filter()相比，它有两个优点——它将在命中重复项时立即停止循环(如果存在(，并且不会一直进行到数组末尾(就像.filter()所做的那样(，因此不会降低不必要的重新渲染速度，并且它返回布尔值，因此您实际上不需要额外的变量。

以下是该方法的快速演示：

const { useState, useEffect } = React,
{ render } = ReactDOM,
rootNode = document.getElementById('root')

const CountryList = () => {
const [countries, setCountries] = useState([])

useEffect(() => {
fetch('https://run.mocky.io/v3/40a13c3b-436e-418c-85e3-d3884666ca05')
.then(res => res.json())
.then(data => setCountries(data))
}, [])

const addCountry = e => {
e.preventDefault()
const countryName = new FormData(e.target).get('label')
if(countries.every(({label}) => label != countryName))
setCountries([
...countries,
{
label: countryName,
value: countries.length+1
}
])
e.target.reset()
}

return !!countries.length && (
<div>
<ul>
{
countries.map(({value, label}) => (
<li key={value}>{label}</li>
))
}
</ul>
<form onSubmit={addCountry}>
<input name="label" />
<input type="submit" value="Add country" />
</form>
</div>
)
}
render (
<CountryList />,
rootNode
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script><div id="root"></div>

Answer 2

我发现了根本问题。在您的选择框组件中，您有：

const [defaultValueoptions, setdefaultValueoptions] = useState(options);

应该是：

const [defaultValueoptions, setdefaultValueoptions] = useState([]);
useEffect(() => {
setdefaultValueoptions(options);
}, [options]);

Answer 3

问题是您没有更新SelectBox组件中的国家/地区列表。国家列表不应由App组件管理，而应由SelectBox组件管理，因为它是一个有状态的组件。您正试图通过更改App组件的状态来让React重新发送SelectBox组件，但这是行不通的。它会重新发送，因为您更改了道具options，但它使用defaultValueoptions来显示选项，而您永远不会更新这些选项。

将其添加到您的SelectBox组件：

useEffect(() => {
setDefaultValueOptions(options);
}, [options]);

并将第9行更改为：

const [defaultValueoptions, setDefaultValueOptions] = useState(options);

编辑我没有看到Talmacel Marian Silviu已经编辑了他的答案：https://stackoverflow.com/a/63092808/828023