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 - 元素不在页面上呈现，但是不会渲染错误

回答

相关问题