React&Redux：我在后台有状态，但无法在我的 JSX 中呈现循环数组

Question

到目前为止，我 GET_TOURNAMENTS 将所有锦标赛对象设置为我的状态，并在页面上呈现它们。

然后，我给每个锦标赛一个按钮，调用 showTournament() 选择我点击的任何锦标赛，并更新状态。当我点击 SHOW_TOURNAMENT 时，我的状态如下：

tournament
  tournaments: [{...}, {...}]           <<~~this is from GET_TOURNAMENTS
  showTournament: {                     <<~~begins as (showTournament: "") until showTournament() action
    _id: "etc",
    title: "Tournament One",
    status: "Open",
    participants: [                          <<~~an array of User objects
      0: {_id: "asdf", username: "asdf"},
      1: {_id: "asdf", username: "asdf"}
    ]
  }

Annnnnnnnd 我试图通过执行以下操作在我的 ShowTournament 组件中呈现所有这些：

class TournamentShow extends Component {
    static propTypes = {
        tournament: PropTypes.object.isRequired,
        auth: PropTypes.object.isRequired
    };

    render() {
        const { _id, title, hostedBy, status, participants } = this.props.tournament.showTournament;

        return (
            <div>
                <h1>{ title }</h1>
                <p>status: { status }</p>
                <p>Registered Participants:</p>
                {
                    participants ?
                    participants.forEach(participant => {
                        return (
                            <ul>
                                <li>{participant}</li>
                            </ul>
                        )
                    }) :
                    null
                }
                <p>Hosted by: { hostedBy }</p>
                <Link to="#">Sign Up</Link><br/>
                <Link to="/">Back to Tournaments main page</Link>
            </div>
        )
    }
};

const mapStateToProps = state => ({
    tournament: state.tournament,
    auth: state.auth
});

export default connect(mapStateToProps, { showTournament })(TournamentShow);

这没有显示任何内容。即使数组中有参与者，也不会呈现任何内容。

我也简单地尝试过 <<~~ 编辑：起初我把标签放在里面，把它们放在 {}

外面

                <p>Registered Participants:</p>
                <ul>
                  {
                      participants.forEach(participant => {
                          return (
                              <li>{participant}</li>
                          )
                      })
                  }
                </ul>

我收到错误 TypeError: Cannot read property 'forEach' of undefined

showTournament 中的所有非数组数据都呈现得很好。我发现了其他 Stack Overflow 问题并尝试了一些解决方案，但其他问题完全不同，我无法弄清楚如何获得正确的实施。

谢谢大家！

Answer 1

首先你需要使用 Array.prototype.map() to render an array, Array.prototype.forEach() 不 return 渲染任何东西，它只是为每个数组项应用给定的函数。

然后确保您拥有来自减速器的正确数据，只需设置 breakpoint 或使用 console.log 即可查看您要呈现的数据。

<ul>
  {
    participants.map(participant => (
      <li key={participant._id}>
        {participant.username}
      </li>
    ))
  }
</ul>

Answer 2

1) 你需要使用 map 因为 forEach 没有 return 任何东西所以无论你在 return 中 forEach forEach 的外界甚至都看不到它。 map 将 return 一个数组。

2) {participant} 你想做什么？它是一个对象，所以要么使用 JSON.stringify(participant) 打印它，要么更好，分别打印 _id 和 username，如下所示：

participants.map(participant => 
   (
      <ul>
         <li>{participant._id}</li>
         <li>{participant.username}</li>
      </ul>
   )
)

3) 如果您遇到如您所说的错误，那么 participants 很可能是 undefined。您能否尝试调试并查看其值是否已填充。如果无法调试，只需尝试使用

打印它

<div>{JSON.stringify(participants)}</div>

甚至

<div>{JSON.stringify(this.props.tournament.showTournament)}</div>

React&Redux：我在后台有状态，但无法在我的 JSX 中呈现循环数组

React&Redux: I have State in the background, but can't render the looped-through Array in my JSX

javascript

reactjs

redux

mern