[英]React useState() array not updating
我使用 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 中看到数据。
完整代码在这里:-
问题似乎是您将其引用未更改的数组( updatedVal
)传递给useState()
,因此在 React 看来您的数据尚未被修改,并且它在不更新 state 的情况下退出。
尝试删除不必要的变量并直接setCountries([...countries, obj])
我可能建议对您的代码进行另一个小修复:您可以使用Array.prototype.every()
来确保每个现有项目都有不同label
。 与.filter()
相比,它有两个优点 - 它会在点击重复项时停止循环(如果存在)并且不会继续直到数组末尾(如.filter()
所做的那样),因此不会不必要地减慢-render 并返回 boolean,因此您实际上不需要额外的变量。
以下是该方法的快速演示:
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>
我找到了根本问题。 在您的 Select Box 组件中,您有:
const [defaultValueoptions, setdefaultValueoptions] = useState(options);
它应该是:
const [defaultValueoptions, setdefaultValueoptions] = useState([]);
useEffect(() => {
setdefaultValueoptions(options);
}, [options]);
问题是您没有更新SelectBox
组件中的国家/地区列表。 国家列表不应该由App
组件管理,而是由SelectBox
组件管理,因为它是一个有状态的组件。 您正试图通过更改App
组件的 state 来让 React 重新呈现您的SelectBox
组件,但这不起作用。 好吧,它会重新渲染,因为您更改了道具options
,但它使用defaultValueoptions
来显示您永远不会更新的选项。
将此添加到您的SelectBox
组件中:
useEffect(() => {
setDefaultValueOptions(options);
}, [options]);
并将第 9 行更改为:
const [defaultValueoptions, setDefaultValueOptions] = useState(options);
编辑我没有看到 Talmacel Marian Silviu 已经编辑了他的答案: https://stackoverflow.com/a/63092808/828023
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.