Question

我对React-redux应用程序开发非常陌生，因此我试图编写简单的worldapp应用程序代码。简直就是我的代码；

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 => {
    // ...
});

反应redux渲染数据未定义

2 个答案: