react-映射数组对象并传递到react-Select[重复]中的选项prop

Question

我正在尝试映射一组对象，并使用name键将其传递给react select中的options prop。我可以用常规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中，我用响应更新状态，并将其存储在模式中

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

然后在我的选择组件中，我将模式设置为选项属性，并映射到值属性中的模式

<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}
/>

在我的codesandbox示例中，我似乎无法在props中获得正确的值，以在下拉选择中显示数据集名称

有关与此问题相关的react select文档的详细信息




Answer 1

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

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

Answer 2

这是一个工作代码沙盒

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

有关函数和胖箭头语法之间差异的更多信息，请参见此处

这是怎么运作的？我喜欢把它想象成胖箭头函数没有自己的或者不改变“这个”的上下文。他们让它保持独立，以便它与创建函数的上下文保持相同。

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

Answer 3

<代码>

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

对数组调用.filter，将返回另一个数组。因此，您将数组传递给值，而不是单个对象。只需添加一个[0]即可展开阵列：

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

或者使用. search来代替：

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