React - 映射数组对象并传递给 react-select 中的 options prop

Question

我正在尝试映射对象数组并使用名称键将其传递给 react-select. Can I just do this using regular JS? I'm trying to incorporate this example 中的选项属性。

我的模拟数据

    mock.onGet("/dataschemas").reply(200, {
  data: [
    {
      id: "2147483599",
      selfUri: "/dataschemas/2147483599",
      name: "Book Catalog"
    },
    {
      id: "2147483600",
      selfUri: "/dataschemas/2147483600",
      name: "Business Articles"
    },
    {
      id: "2147483602",
      selfUri: "/dataschemas/2147483602",
      name: "Phone Data"
    }
  ]
});

在 cDM 中，我正在使用响应更新状态并将其存储在 schemas

中

  componentDidMount() {
    axios.get("/dataschemas").then(function(response) {
      console.log(response.data.data);
      this.setState({
        schemas: response.data.data
      });
      console.log(this.state.schemas);
    });
  }

然后在我的 select 组件中，我将模式设置为 options 道具并映射到 values 道具

中

<Select
  id="color"
  options={this.state.schemas}
  isMulti={false}
  value={this.state.schemas.filter(
    ({ name }) => name === this.state.name
  )}
  getOptionLabel={({ name }) => name}
  getOptionValue={({ id }) => id}
  onChange={({ value }) => this.setState({ name: value })}
  onBlur={this.handleBlur}
/>

我似乎无法在 props 中获得正确的值，无法在我的 codesandbox example

的下拉列表 selection 中显示数据模式名称

有关此问题的 react-select docs 的更多信息

Answer 1

<Select> 组件的 value 道具需要一个 object/value。但是在下面的代码中：

this.state.schemas.filter(
  ({ name }) => name === this.state.name
)

正在对一个数组 returns 调用另一个数组 .filter。因此，您将数组传递给 value，而不是单个对象。你只需要添加一个 [0] 来解包数组：

this.state.schemas.filter(
  ({ name }) => name === this.state.name
)[0]

或使用.find代替：

this.state.schemas.find(
  ({ name }) => name === this.state.name
)

Answer 2

您正在尝试从响应函数范围内访问状态。将您的 componentDidMount 更改为：

async componentDidMount() {
  const response = await axios.get("/dataschemas");
  if (response.data && response.data.data) {
    this.setState({ schemas: response.data.data });
  }
}

Answer 3

这里是 working codesandbox

问题似乎是您使用的是函数语法而不是粗箭头语法，因此绑定不正确，因此 this.setState 未定义

有关函数和粗箭头语法之间差异的更多信息here

How does this work? I like to think of it as fat arrow functions don’t have their own or don’t change the context of ‘this’. They leave it alone so that it stays the same as the context in which the function was created.

为了调试类似的未来问题，我建议从查看 javascript 控制台错误开始——最初的提示是 this.setState 未定义

的错误

React - 映射数组对象并传递给 react-select 中的 options prop

React - map over array object and pass to options prop in react-select

javascript

reactjs

react-select