从 Redux 商店获取项目到 React-select 选项

Question

如何从我的 Redux 商店获取项目到 React-select 选项？尝试了很多东西，但我无法解决这个问题。尝试通过直接获取 api 来获取数据，它有效，但对我不起作用。在 redux reducer 中，我从外部 json 文件中获取数据以将项目放在沙箱上，但实际上我正在使用我的服务器 api。在从 redux Store 获取的列表页面数据上，但我无法在 Select 选项中获取它。请大家帮忙。这是一个沙盒link（选择“select”）

Answer 1

异步 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

从 Redux 商店获取项目到 React-select 选项

Get items from Redux store to React-select options

reactjs

react-select

redux

react-redux