Question

我在虚拟文件夹中有不同的成分（伏特加，杜松子酒，威士忌...）json文件。我有一个IngredientList.js，在其中我选择一种成分并将其传递给 IngredientSearch.js

IngredientSearch.js根据成分名称获取相关的json文件，然后将IngredientRes的状态设置为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;

Answer 1

您可以立即在componentDidUpdate（）中调用setState（），但请注意，必须将其包装在-

之类的条件下

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

否则将导致无限循环。

供参考-https://reactjs.org/docs/react-component.html#componentdidupdate

使用react axios setState

1 个答案: