小道具で配列を計算して渡す方法は？

Question

私はreact-formを使用して簡単なフォームを作成し、項目のリストをSelectコンポーネントに渡したいと考えています。 Selectコンポーネントは、react-formライブラリの一部です。

私は私が最初に私fooItems配列はReduxのmapStateToPropsから

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

を受け取っフィルタリングするSelectコンポーネント

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

ためfooItems

Select

に必要な構造を渡したいです私はしようとしています コンポーネント

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

たり、直接マップ

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

の結果を返す必要があり、その関数を呼び出す必要があります