Reactjs 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())
});

类团队扩展组件{
componentDidMount（）{
this.props.onRequestData（）；
}
renderTeams（）{
const{team}=this.props；
控制台日志（团队）；
_.map（团队，团队列表=>
国籍
{teamList.name}
);
}
render（）{
返回(
{this.renderTeams（）}
);
}
}
常量mapStateToProps=（状态）=>{
log（“mapPropState”，state）；
返回{
团队：state.fetchData.teams
};
};
const mapDispatchToProps=调度=>({
onRequestData:（）=>dispatch（fetchResults（））
});

我可以看到我获取了数据（使用console.log（“mapPropState”，state），但不幸的是，我猜我的呈现方法没有定义。所以页面上没有任何操作，也没有控制台错误。那么我哪里做错了？

---

谢谢。

您的

renderEAMS

函数没有返回任何内容。从代码外观来看，我认为它应该返回

.map（…）

，对吗？

您的

renderEAMS

函数没有返回任何内容。从代码外观来看，我认为它应该返回

.map（…）

，对吗？

team

在首次呈现组件时未定义。我假设

fetchResults（）

调用

fetch（）

发出HTTP请求。这将最终返回数据，稍后您会看到

team

有一个值。您需要以这样一种方式编写组件，以检查是否定义了

team

：

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

---

第一次呈现组件时，

team

未定义。我假设

fetchResults（）

调用

fetch（）

发出HTTP请求。这将最终返回数据，稍后您会看到

team

有一个值。您需要以这样一种方式编写组件，以检查是否定义了

team

：

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

---

确切的错误消息是什么？它在哪一行？最大的问题之一是，没有控制台错误…我只看到白色页面。你可以看到那里发生了什么。确切的错误消息是什么？它在哪一行？最大的问题之一是，没有控制台错误…我只看到白色页面。你可以看到发生了什么ng.简单的“团队&&”控件工作，我会记住你说的话。非常感谢。@Ryoush这是一种称为“条件渲染”的常用技术。它在尝试渲染之前检查第一个值是否为“truthy”（通常指已定义）。简单的“团队&”控件工作，我会记住你所说的。非常感谢。@Ryoush这是一种称为“条件渲染”的常用技术。它在尝试渲染之前检查第一个值是否为“truthy”（通常意味着它已定义）。