我已经使用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
}
}
问题是它没有更新,尽管我可以在updateVal中看到数据。
整个代码在这里:-
答案 0 :(得分:3)
问题似乎是您正在将其引用保持不变的数组(useState()
)传递给updatedVal
,因此看来React尚未修改您的数据,并且{ {3}}。
尝试删除该不必要的变量,然后直接setCountries([...countries, obj])
我建议您对代码进行另一个小修正:您可以使用bails out without updating your state来确保每个现有项目都有不同的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>
答案 1 :(得分:2)
我找到了根本问题。在“选择框”组件中,您具有:
const [defaultValueoptions, setdefaultValueoptions] = useState(options);
应该是:
const [defaultValueoptions, setdefaultValueoptions] = useState([]);
useEffect(() => {
setdefaultValueoptions(options);
}, [options]);
答案 2 :(得分:1)
问题是您没有更新SelectBox
组件内的国家/地区列表。国家/地区列表不应由App
组件管理,而应由SelectBox
组件管理,因为它是有状态的组件。您正在尝试通过更改SelectBox
组件的状态来使React重新呈现App
组件,这是行不通的。好吧,它会重新渲染,因为您更改了道具options
,但是它使用defaultValueoptions
来显示从未更新的选项。
将此添加到您的SelectBox
组件中:
useEffect(() => {
setDefaultValueOptions(options);
}, [options]);
并将第9行更改为:
const [defaultValueoptions, setDefaultValueOptions] = useState(options);
编辑 我没看到Talmacel Marian Silviu已经编辑了他的答案:https://stackoverflow.com/a/63092808/828023