从Redux商店获取项目以进行React选择选项

Question

如何从我的Redux商店中获取项目以React选择选项？尝试了很多方法，但我解决不了这个问题。尝试通过直接获取api来获取数据，这很有效，但对我来说不起作用。在redux reducers中，我从外部json文件中获取数据，将项目放在沙箱中，但实际上我使用的是我的服务器api。在列表页上，数据取自redux Store，但我无法在Select选项中获取。请大家帮忙。这里是一个沙箱链接(选择"选择"(

Answer 1

async Select组件需要一个输入来获取开始获取的数据。此外，它期望调用callback或返回Promise。

将Select修改为

import React, { useState } from "react"
// Use the non-async version
import AsyncSelect from "react-select"
import { useSelector } from "react-redux"
function Select() {
const [inputValue, setValue] = useState("")
const [selectedValue, setSelectedValue] = useState(null)
// useSelector will make sure this component re-renders
const list = useSelector((s) => s.tasks.list)
const handleInputChange = (value) => {
setValue(value)
}
const handleChange = (value) => {
setSelectedValue(value)
}
return (
<div className="App">
<h3>React-Select Async Dropdown - </h3>
<pre>Input Value: "{inputValue}"</pre>
<AsyncSelect
cacheOptions
defaultOptions
options={list} // Since the list is provided by the store, provide it directly
value={selectedValue}
getOptionLabel={(e) => e.name}
getOptionValue={(e) => e.id}
onInputChange={handleInputChange}
onChange={handleChange}
/>
<pre>Selected Value: {JSON.stringify(selectedValue || {}, null, 2)}</pre>
</div>
)
}
export default Select