ReactJS:在选择列表中添加值

Question

我创建了一个select using react-select，里面有一个按钮。我使用这个按钮来调用api中的另一个页面来获取其他20个值。

const [pageNumber, setPageNumber] = useState(0)
useEffect(() => {
props.getComunes(pageNumber);
}, [pageNumber])
const comunes = Comunes.map(comune => {
return ({ value: comune.comCod, label: comune.comDes })
})

const addValue = () => {
setPageNumber(pageNumber + 1)
}

const SelectMenuButton = (props) => {
console.log("props ", props)
return (
<components.MenuList  {...props}>
{props.children}
<button onClick={() => addValue()}>Add new element</button>
</components.MenuList >
)
}
return(
//...
<AvGroup>
<Label id="comCodLabel" for="comCod">
Select
</Label>
<AsyncSelect
options={comunes}
placeholder='Start typing'
components={{ MenuList: SelectMenuButton }} />
</AvGroup>
)
const mapDispatchToProps = {
getComunes
}

现在我的问题是，通过这种方式，列表被替换为新的列表(所以在开始时我有20个第一个值，如果我点击按钮，我有第二个20个值，而我将在列表中获得40个结果)。

如何连接新列表而不替换它?

Answer 1

您可以使用扩展操作符...向现有值追加新值(一组值)。我建议您使用另一个保存选项项的状态。每次获取新值时，只需将新值集附加到保存所有项的状态。

const [pageNumber, setPageNumber] = useState(0)
const [items,setItems] = useState([])
const comunes = Comunes.map(comune => {
return ({ value: comune.comCod, label: comune.comDes })
})
useEffect(() => {
props.getComunes(pageNumber);
setItems([...items,...comunes]) //Append comunes items to existing items.
}, [pageNumber])

const addValue = () => {
setPageNumber(pageNumber + 1)
}

const SelectMenuButton = (props) => {
console.log("props ", props)
return (
<components.MenuList  {...props}>
{props.children}
<button onClick={() => addValue()}>Add new element</button>
</components.MenuList >
)
}
return(
//...
<AvGroup>
<Label id="comCodLabel" for="comCod">
Select
</Label>
<AsyncSelect
options={items} {/*Use state array items to populate options*/}
placeholder='Start typing'
components={{ MenuList: SelectMenuButton }} />
</AvGroup>
)
const mapDispatchToProps = {
getComunes
}