开发者问题收集

react redux 渲染数据未定义

2018-10-06
551
reactjs redux react-redux

我对 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) 但不幸的是我猜我的渲染方法未定义。所以页面上什么都不起作用，也没有控制台错误。那么我哪里做错了？ 谢谢。

2个回答

您的 renderTeams 函数未返回任何内容。从您的代码来看，我假设它应该返回 _.map(...) ，对吗？

Tyler
2018-10-06

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 => {
    // ...
});
Code-Apprentice
2018-10-06