Почему мой вызов fetchButtonTeams() ниже не fetchButtonTeams() . Я пытаюсь напечатать его результаты в console.log(this.state.data) ниже. Даже если я вызываю его в render (), я получаю бесконечные циклы или ошибки. Кто-нибудь может подсказать, что делать?

Я просто хочу напечатать результаты в console.log в render ()

 class TeamFilter extends Component { constructor() { super(); this.state = { data: [] }; } async fetchButtonTeams() { const response = await fetch(`/api/teams`); const json = await response.json(); console.log(json) this.setState({ data: json }); } handleTeamSelection = e ={amp}gt; { this.props.setTeam(e.target.title); this.props.fetchTeams(e.target.title) }; render() { let test = ['Chaos', 'High Elves', 'Orcs'] this.fetchButtonTeams() console.log(this.state.data) return ( {amp}lt;DropdownButton id="dropdown-team-button" title={this.props.team_name}{amp}gt; {test.map(cls ={amp}gt; ( {amp}lt;div key={cls}{amp}gt; {amp}lt;Dropdown.Item onClick={this.handleTeamSelection} title={cls}{amp}gt;{cls}{amp}lt;/Dropdown.Item{amp}gt; {amp}lt;/div{amp}gt; ))} {amp}lt;/DropdownButton{amp}gt; ) } } const mapStateToProps = state ={amp}gt; { return { team_name: state.team_name } }; const mapDispatchToProps = dispatch ={amp}gt; { return { fetchCards: path ={amp}gt; dispatch(fetchCards(path)), fetchTeams: params ={amp}gt; dispatch(fetchTeams(params)), setTeam: team_name ={amp}gt; dispatch({ type: "SET_TEAM", team_name }) } }; export default connect(mapStateToProps, mapDispatchToProps)(TeamFilter) 

Причина, по которой вы получаете бесконечные циклы при вызове функции в методе render заключается в том, что каждый раз, когда функция вызывает setState который, в свою очередь, снова и снова запускает функцию, вызывая бесконечный цикл.

Я не вижу, где вы вызываете fetchButtonTeams() где-либо в вашем компоненте, но хорошей идеей для извлечения данных является размещение метода внутри метода жизненного цикла componentDidMount и журнала консоли внутри метода рендеринга. Вы можете узнать больше о хуках жизненного цикла здесь .

Для вашего кода:

 class TeamFilter extends Component { constructor() { super(); this.state = { data: [] }; } componentDidMount() { this.fetchButtonTeams(); } async fetchButtonTeams() { const response = await fetch(`/api/teams`); const json = await response.json(); console.log(json); this.setState({ data: json }); } handleTeamSelection = e ={amp}gt; { this.props.setTeam(e.target.title); this.props.fetchTeams(e.target.title); }; render() { let test = ["Chaos", "High Elves", "Orcs"]; console.log(this.state.data); return ( {amp}lt;DropdownButton id="dropdown-team-button" title={this.props.team_name}{amp}gt; {test.map(cls ={amp}gt; ( {amp}lt;div key={cls}{amp}gt; {amp}lt;Dropdown.Item onClick={this.handleTeamSelection} title={cls}{amp}gt; {cls} {amp}lt;/Dropdown.Item{amp}gt; {amp}lt;/div{amp}gt; ))} {amp}lt;/DropdownButton{amp}gt; ); } } const mapStateToProps = state ={amp}gt; { return { team_name: state.team_name }; }; const mapDispatchToProps = dispatch ={amp}gt; { return { fetchCards: path ={amp}gt; dispatch(fetchCards(path)), fetchTeams: params ={amp}gt; dispatch(fetchTeams(params)), setTeam: team_name ={amp}gt; dispatch({ type: "SET_TEAM", team_name }) }; }; export default connect(mapStateToProps, mapDispatchToProps)(TeamFilter); 
Хосе Феликс

новый участник этого сайта. Будьте внимательны, спрашивая разъяснения, комментируя и отвечая. Проверьте наш

Правила поведения

,