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

问题描述

我正在尝试映射一组对象并使用 name 键将其传递给react-select. 我可以使用常规 JS 做到这一点吗？我正在尝试合并这个例子。

我的模拟数据

    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);
    });
  }

然后在我的选择组件中，我将模式设置为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}
/>

我似乎无法在道具中获得正确的值，以在我的代码框示例的下拉选择中显示数据模式名称

有关与此问题有关的react-select 文档的更多信息

标签： javascriptreactjsreact-select

这是一个有效的代码框

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

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

这是如何运作的？我喜欢把它想象成胖箭头函数没有自己的或不改变“this”的上下文。他们不理会它，以便它与创建函数的上下文保持一致。

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

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

问题描述

解决方案

推荐阅读