reactjs - 如何在道具中计算和传递数组？

Question

我正在使用react-form制作一个简单的表单，并希望将项目列表传递给Select组件。Select组件是库的一部分react-form。

我想将 a 传递fooItems给Select

Select组件所需的结构

selectItems = [{
  value: 1,
  label: 'a',
}, {
  value: 2,
  label: 'b',
}]

我首先想过滤fooItems从 Redux 收到的数组mapStateToProps

fooItems = [{
  id: 1,
  name: 'a',
  parent: 'P',
  child: 'C'
}, {
  id: 2,
  name: 'b',
  parent: 'P',
  child: 'C'
}]

我正在尝试在将道具传递给组件时实现一个功能

render() => (
    <Select
    field = "foo"
    id = "foo"
    options = {
      () => {
        return this.props.fooItems.map(e => {
          return {
            label: e.name,
            value: e.id
          }
        })
      }
    }
    />)

但我收到以下错误

Uncaught TypeError: Cannot read property 'find' of undefined
at t.value (index.js:1)

The above error occurred in the <t> component:
in t (created by r)

Answer 1

Optionsfield 需要一个对象数组，但是您正在向它传递一个函数。您要么需要调用该函数

render() => (
    <Select
    field = "foo"
    id = "foo"
    options = {
      () => {
        return this.props.fooItems.map(e => {
          return {
            label: e.name,
            value: e.id
          }
        })
      }();
    }
 />)

或者你应该直接返回 map 的结果

render() => (
    <Select
    field = "foo"
    id = "foo"
    options = {this.props.fooItems.map(e => {
          return {
            label: e.name,
            value: e.id
          }
        })
    }
 />)