Question

我有一个存储在我的redux商店中的数组，但是当我调用notifications.map((x, i) => {}时，实际上没有任何内容呈现给视图...但是，如果我console.log x到控制台，那么它们会打印出来....

如何让我的数组内容呈现给视图？

import React from 'react'
import { connect } from 'react-redux'
import {List, ListItem} from 'material-ui/List'

const mapStateToProps = state => {
  return {
    notifications: state.notificationsReducer.notifications,
    errorMessage: state.notificationsReducer.errorMessage
  }
}

const notifications = ({notifications, errorMessage}) => {
  notifications.map((x, i) => {
    console.log(x.title)
  })
  return (
    <List>
      {notifications.map((x, i) => {
        <ListItem key={i} primaryText={x.title} />
      })}
    </List>
  )
}

const Notifications = connect(mapStateToProps)(notifications)
export default Notifications

Answer 1

删除map内的箭头功能括号。

<List>
  {notifications.map((x, i) => 
    <ListItem key={i} primaryText={x.title} />
  )}
</List>

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions#Function_body

我的箭头功能可以有一个“简洁的身体”或通常的“块”   体”。

在一个简洁的正文中，只需要一个表达式，一个隐含的表达式   返回附上。在块体中，您必须使用显式返回   言。

Answer 2

你必须从函数中返回一个值才能得到你想要的结果

  return (
    <List>
      {notifications.map((x, i) => {
        return <ListItem key={i} primaryText={x.title} />
      })}
    </List>
  )

或者只是首先不打开花括号（隐式返回）

  return (
    <List>
      {notifications.map((x, i) =>
           <ListItem key={i} primaryText={x.title} />
      )}
    </List>
  )

Array.map对象没有显示到视图？

2 个答案: