RN - 直接从状态语法映射

Question

我正在尝试从状态映射一个数组 - 但对正确的语法感到困惑 - 谁能告诉我哪里出错了：

这是我在莫：

      newsStorys = () => {

    return (

      {this.state.newsFeed.map((a) => {

        <View style={ModalStyles.newsArticle}>

          <Text style={ModalStyles.newsDate}>{a.date}</Text>

          <Text style={ModalStyles.newsTitle}>{a.title}</Text>

          <Text style={ModalStyles.newsDesc}>

          {a.story}

          </Text>

        </View>

    }

  }

    );

  };

Answer 1

我不确定这是否是您组件的全部代码，但我可以看到三件事。如果newsFeed在组件首次渲染时未初始化（假设它尚未定义），newsFeed.map()则将抛出异常。您不会从地图调用中返回任何内容。你应该这样写：&nbsp; &nbsp;newsStorys = () => {&nbsp; &nbsp; &nbsp; if (!this.state.newsFeed) return null;&nbsp; &nbsp; &nbsp; return this.state.newsFeed.map((a) => ({ // <--- note the parentheses here, you don't have it&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <View style={ModalStyles.newsArticle}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Text style={ModalStyles.newsDate}>{a.date}</Text>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Text style={ModalStyles.newsTitle}>{a.title}</Text>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Text style={ModalStyles.newsDesc}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {a.story}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Text>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </View>&nbsp; &nbsp; &nbsp; &nbsp;});&nbsp; &nbsp; &nbsp;);&nbsp; &nbsp;};如果你想避免括号，那么你需要明确地返回一些东西，就像这样：&nbsp; &nbsp; this.state.newsFeed.map((a) => {&nbsp; &nbsp; &nbsp; &nbsp;return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <View style={ModalStyles.newsArticle}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Text style={ModalStyles.newsDate}>{a.date}</Text>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Text style={ModalStyles.newsTitle}>{a.title}</Text>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Text style={ModalStyles.newsDesc}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {a.story}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Text>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </View>&nbsp; &nbsp; &nbsp; &nbsp;);&nbsp; &nbsp; });您可能需要一个额外的视图来包装 map 返回的视图列表。您还需要为每个视图提供一个唯一的键，以便 React 可以跟踪它们。&nbsp; &nbsp;<View style={ModalStyles.newsArticle} key={'nome unique value'}>&nbsp; &nbsp; &nbsp;...&nbsp; &nbsp;</View>最后我认为使用 aFlatList而不是map.干杯!

Answer 2

在网上玩了一圈，并进行了很好的挖掘，找到了语法答案：（感谢 Bruno 提供的关键和指针）。newsStorys = () => {&nbsp; &nbsp;&nbsp; &nbsp; return this.state.newsFeed.map((value, index) => {&nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <View style={ModalStyles.newsArticle} key={index}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Text style={ModalStyles.newsDate}>{value.date}</Text>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Text style={ModalStyles.newsTitle}>{value.title}</Text>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Text style={ModalStyles.newsDesc}>{value.story}</Text>&nbsp; &nbsp; &nbsp; &nbsp; </View>&nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; });&nbsp; };

Answer 3

尝试这个newsStorys = () => (&nbsp; &nbsp; this.state.newsFeed.map(({ date, story, title }, index) =>&nbsp; &nbsp; &nbsp; &nbsp; <View key={`news-${index}`} style={ModalStyles.newsArticle}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Text style={ModalStyles.newsDate}>{date}</Text>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Text style={ModalStyles.newsTitle}>{title}</Text>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Text style={ModalStyles.newsDesc}>{story}</Text>&nbsp; &nbsp; &nbsp; &nbsp; </View>&nbsp; &nbsp; ));