はReactJS

Question

 {props.stories.map((story) => 
     <div key={story.id}> 
      {story = story.story} 
      <SliderItem story={story} /> 
     </div> 
    )} 

上記のコードのためにJSX内の変数に値を割り当てる行番号3でstoryが目的であるため、「Uncaught (in promise) Error: Objects are not valid as a React child (found: object with keysを」というエラーをスローします。

私はその条件を直接<SliderItem story={story.story} />として移動できますが、計算された値を変数に代入してJSXで使用できる方法はありますか？

のように、私はいくつかのロジックを適用したい：JSXで{}間のすべてがちょうどJavaScriptがあるので、あなたは、次の操作を行うことができます

{ let storyObj = story.type === 'story' && story.story ? story.story : story } 

Answer 1

：

{props.stories.map((story) => { 
    const storyObj = (story.type === 'story' && story.story) ? story.story : story; 
    return (
    <div key={story.id}> 
     <SliderItem story={storyObj} /> 
    </div> 
); 
})} 

Answer 2

私はそれをお勧めしませんけどあなたのコードを本当にわかりにくくするので、カンマ演算子を使用して値を割り当てることができます：

{story = story.story, <SliderItem story={story} />} 

なぜあなたはこれをやりたいのですか？

function getStory(storyObj) { 
    return storyObj.type === 'story' && storyObj.story ? storyObj.story : storyObj; 
} 

そしてJSXでそれを使用します：

Answer 3

あなたは正しい値を取得しますrender()の外側の関数を作成することができますなぜあなたはちょうどstory.storyに

{props.stories.map(storyObj => 
    <div key={storyObj.id}> 
    <SliderItem story={getStory(storyObj)} /> 
    </div> 
)} 

Answer 4

を渡しませんの？あなたのコンポーネントで

{props.stories.map((story) => 
    <div key={story.id}> 
     <SliderItem story={story.story} fallback={story} /> 
    </div> 
)} 

this.props.storyはその後undefinedthis.props.fallbackを使用している場合。