react redux 渲染数据未定义

Question

我对 React-redux 应用程序开发非常陌生，所以我正在尝试编写简单的世界杯应用程序。只是我的代码是；

class Teams extends Component {
  componentDidMount() {
    this.props.onRequestData();
  }

  renderTeams() {
    const { team } = this.props;
    console.log(team);
            _.map(team, teamList =>
              <Grid.Column
                mobile={4}
                tablet={8}
                computer={8}
                key={teamList.id} >
                <Card >
                  <Image src={teamList.flag} />
                  <Card.Content>
                    <Card.Header>Nationality</Card.Header>
                    <Card.Description key={teamList.id}> {teamList.name} </Card.Description>
                  </Card.Content>
                </Card>
              </Grid.Column>
          );

  }
  render() {
    return (
      <Container>
        <Grid>
          {this.renderTeams()}
        </Grid>
      </Container>);
  }
}

const mapStateToProps = (state) => {
console.log("mapPropState", state);
  return {
    team: state.fetchData.teams

  };
};
const mapDispatchToProps = dispatch => ({
  onRequestData: () => dispatch(fetchResults())
});

我可以看到我获取了数据（使用 console.log("mapPropState", state) 但不幸的是我猜我的渲染方法未定义。所以页面上没有任何工作并且没有控制台错误。那么我做错了什么？ 谢谢。

Answer 1

您的 renderTeams 函数没有返回任何内容。从您的代码的外观来看，我认为它应该返回 _.map(...)，对吗？

Answer 2

team 在首次渲染组件时未定义。我假设fetchResults() 调用fetch() 来发出HTTP 请求。这最终将返回数据，稍后您会看到 team 有一个值。您需要以这样一种方式编写您的组件，以检查是否定义了team：

render() {
return (
  <Container>
    <Grid>
      {this.props.team && this.renderTeams()}
    </Grid>
  </Container>);

如果你想变得花哨，你可以渲染一个旋转的圆圈来表示数据正在加载，直到你有可用的数据。

注意：

team 和 teamList 的名称似乎颠倒了，因为 teamList 似乎指的是存储在 team 中的数组中的单个团队对象。我建议您在映射时使用teamList 来引用整个数组，并使用team 来引用数组中的各个对象。

没有必要使用_.map()，因为你可以使用teamList.map(team => {/* ... */});。此外，您需要返回列表映射的结果：

return teamList.map(team => {
    // ...
});