React Redux - 元素不在頁面上呈現，但是不會渲染錯誤

我似乎對我的react-redux應用程序有問題。我目前正在使用next.js，這在使用redux時往往會有點奇怪，所以我不確定這是否是問題。這就是說，我試圖渲染一個組件，它通過一個對象數組循環。很簡單。我的地圖狀態功能正在工作，當我設置信息到state.aboutMe[0]我收到第一個值。一旦我刪除它並嘗試遍歷數組，最初，我得到一個錯誤，指出「必須返回一個有效的React元素（或null）。您可能返回了未定義的數組或其他無效的對象。」但我能夠通過將我的info.map包裝在<div> el中來解決這個問題。React Redux - 元素不在頁面上呈現，但是不會渲染錯誤

我檢查了其他問題，並重構了我的函數，該類擴展了React.Component類，但仍然沒有迭代運氣。在這種情況下，它只是在屏幕上不顯示任何內容。我也在底部添加了該代碼。請讓我知道，如果我能清除任何東西。提前致謝！

// This code IS working 
// Needed to wrap inner return statement in JSX 
const heading = ({info}) => { 
    console.log(info); 
    return (
    <div>{ 
    info.map(x => { 
    return ( 
     <div> 
     <h2>{x.title}</h2> 
     </div> 
    ) 
    }) 
    } 
    </div> 
) 
    } 

    // Same code without inner return 
    const heading = ({info}) => { 
    console.log(info); 
    return (
    <div> 
     { 
     info.map(x => (
      <div> 
      <h2>{x.title}</h2> 
      </div> 
     ) 
     ) 
     } 
    </div> 
) 
} 

// prints info in console 
    const heading = ({info}) => { 
    console.log(info); 
    return (
    <div>{ 
    info.map(x => { 
    <div> 
     <h2>{x.title}</h2> 
    </div> 
    }) 
    } 
    </div> 
) 
} 

const mapState = state => ({ info: state.aboutMe }) 
const Heading = connect(mapState)(heading); 

// EXAMPLE WITH CLASS 
// Prints nothing to the screen but doesnt throw error 
class homePage extends React.Component { 
    render() { 
    const { info } = this.props; 
    console.log(info); 
    return (
     <div> { 
     info.map(x => { 
     <div> 
      <h2>{x.title}</h2><p>{x.text}</p> 
     </div> 
     }) 
     } 
     </div> 
    ) 
    } 
} 
const mapState = state => ({ info: state.aboutMe }) 
const Heading = connect(mapState)(homePage);

來源

2017-08-16 Thomas Greco

您的匿名箭頭功能不返回任何東西。一旦你使用大括號，你會失去隱式回報。它不會拋出錯誤，因爲沒有錯誤。不相關的，但我會爲標題製作一個小組件，所以你最終得到這個：https://gist.github.com/davelnewton/1214c9bb3f7103ff3d0264a95892c999 –

應該

return (
    <div> 
    {info.map(x => (<div> 
     <h2>{x.title}</h2><p>{x.text}</p> 
    </div>) 
    )} 
    </div> 
)

因爲地圖內的股利是不是真的被返回

來源

2017-08-16 01:14:36 justelouise

這是引發錯誤'SyntaxError：Unexpected token'。我相信這是由於JSX有一個父元素。 –

@ThomasGreco我更新了代碼。應該沒有{}裏面的地圖功能 – justelouise

哇！真棒，這工作。我明白你在說什麼，但是我會用方括號更新這個例子，所以人們不會看到。 –

請嘗試明確使用返回裏面的地圖。

來源

2017-08-16 00:50:50 skellertor

React Redux - 元素不在頁面上呈現，但是不會渲染錯誤

回答

相關問題