Ошибка рендеринга в цикле с помощью axio реакции setState - PullRequest
Новая
       18

Ошибка рендеринга в цикле с помощью axio реакции setState

0 голосов
/ 08 июля 2019

У меня есть разные ингредиенты (водка, джин, виски ...) файлы json в фиктивной папке. У меня есть IngredientList.js, где я выбираю один ингредиент и передаю его IngredientSearch.js

IngredientSearch.js получает соответствующий json-файл на основе имени ингредиента, а затем я устанавливаю состояние componentRes в res.data.drinks

Проблема, с которой я сталкиваюсь, заключается в том, что когда я печатаю console.log (newVals) ->, консоль записывает массивы из json бесконечно . Похоже, я что-то бесконечно повторяю.

Что не так с моей настройкой?

IngredientSearch.js: 

import React, { Component } from 'react';
import axios from 'axios';

class IngredientSearch extends Component {
    constructor() {
        super();
        this.state = {
            ingredientRes: []
        };
    }
    componentDidUpdate(prevProps) {
        let ingredient = this.props.ingredient;  //for example: vodka
        this.getIngredient_drinks(ingredient);
    }
    getIngredient_drinks = (ingredient) => {
        if(ingredient !== null) {
            axios.get(`../dummy/${ingredient}.json`)
                .then((res)=>{
                    let newVals = [];
                    newVals.push(res.data.drinks);
                    //console.log(newVals); // keeps relogging the arrays
                    this.setState({ ingredientRes: newVals });
                }).catch((err)=>{
                    console.log(err);
                })
        }
    }
    render() { 
        return (
            <div>
                IngredientSearch Results
                I want to map the ingredientRes here
            </div>
        )
    }
}
export default IngredientSearch;

1 Ответ

1 голос
/ 08 июля 2019

Вы можете немедленно вызвать setState () в componentDidUpdate (), но учтите, что он должен быть заключен в условие, подобное - 

if (this.props.ingredient !== prevProps.ingredient) {
    this.getIngredient_drinks(ingredient);
  }

В противном случае это вызовет бесконечный цикл.

Для справки - https://reactjs.org/docs/react-component.html#componentdidupdate

...