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

Question

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

我想将 fooItems 传递给 Select

Select 组件所需的结构

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

我首先要过滤从 Redux mapStateToProps

收到的 fooItems 数组

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

我试图在将 props 传递给组件时实现一个功能

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

Options 字段需要一个对象数组，但是您向它传递了一个函数。您要么需要调用该函数

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

或者你应该直接return map

的结果

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

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

How to compute and pass array in props?

reactjs

react-redux

react-props