реагировать на редукцию - PullRequest
Новая
       10

реагировать на редукцию

0 голосов
/ 07 октября 2018

Я очень новичок в разработке приложений React-redux, поэтому я пытаюсь написать простое приложение worldcup.Просто мой код: 

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", состояние), но, к сожалению, я предполагаю, что мой метод рендеринга не определен. Так что ничто не работает на странице и без консолиошибка. Так, где я сделал не так? Спасибо.

Ответы [ 2 ]

0 голосов
/ 07 октября 2018

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 => {
    // ...
});
0 голосов
/ 07 октября 2018

Ваша renderTeams функция ничего не возвращает.Судя по вашему коду, он должен возвращать _.map(...), верно?

...