Javascript 反应组件未按预期呈现结果

我有一个ReactComponent，它查询RESTAPI并将其结果呈现为HTML表。结果是一个JSON，格式如下：

{
  timestamp: ",
  message: "",
  requestId: "",
  responseData: []
}

下面给出了可生成的react组件，它将呈现

responseData

，这是一个列表。以下是我看到的问题：

TypeError:无法读取未定义的属性“map”

因此，看起来没有及时从REST API获取数据进行渲染。我怎样才能解决这个问题。请在下面查找组件的代码。提前谢谢

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

export class ResultTable extends Component {
  constructor(props) {
    super(props);
    this.state = {
      fetchedJson: [],
      fooBar: false
    };
  }

  handleSubmit(selectedRecipes) {
    if (!this.state.fooBar) {
      let url =
        "http://localhost:8080/ingredients/?recipes=" +
        selectedRecipes.join(",");
      console.log(url);
      axios.get(url).then(res => {
        this.setState({
          fetchedJson: res.data,
          fooBar: true
        });
      });
    }
  }

  render() {
    this.handleSubmit(this.props.recipeList);
    return (
      <div>
        <h1 align="center">Ingredients</h1>
        <table border="1" align="center">
          <tbody>
            {this.state.fetchedJson.responseData.map(function(ingredient, ingredientIndex) {
              return (
                <tr key={ingredientIndex}>
                  <td>{ingredient.name}</td>
                  <td>{ingredient.amount}</td>
                  <td>{ingredient.unit}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    );
  }
}

import React，{Component}来自“React”；
从“axios”导入axios；
导出类可结果扩展组件{
建造师（道具）{
超级（道具）；
此.state={
fetchedJson:[]，
福巴：错
};
}
handleSubmit（选定的规格）{
如果（！this.state.fooBar）{
让url=
"http://localhost:8080/ingredients/?recipes=" +
selectedRecipes.join（“，”）；
console.log（url）；
get（url）。然后（res=>{
这是我的国家({
fetchedJson:res.data，
福巴：没错
});
});
}
}
render（）{
this.handleSubmit（this.props.recipeList）；
返回(
成分
{this.state.fetchedJson.responseData.map（函数（成分，IngreditIndex））{
返回(
{component.name}
{成分.数量}
{成分单位}
);
})}
);
}
}

请勿在

渲染功能内产生副作用。为此，您必须使用（或用于功能组件）

另外，
axios.get
是一个异步函数，因此在代码中，您可以对服务器进行API调用，并尝试通过
this.state.fetchedJson.responseData进行映射，直到收到响应为止。在本例中，
fetchedJson
是一个空对象，因此
fetchedJson.responseData
是
undefined

此代码应适用于：

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

export class ResultTable extends Component {
    constructor(props) {
        super(props);
        this.state = {
            fetchedJson: {},
            isLoaded: false
        };
    }

    componentDidMount() {
        //move side effect (API call) to componentDidMount
        this.handleSubmit(this.props.recipeList);
    };

    handleSubmit(selectedRecipes) {
        if (!this.state.isLoaded) {
            let url =
                "http://localhost:8080/ingredients/?recipes=" +
                selectedRecipes.join(",");
            axios.get(url).then(res => {
                this.setState({
                    fetchedJson: res.data,
                    isLoaded: true
                });
            });
        }
    }

    render() {
        //check that you received data before try to render it
        return this.state.isLoaded ? (
            <div>
                <h1 align="center">Ingredients</h1>
                <table border="1" align="center">
                    <tbody>
                    {this.state.fetchedJson.responseData.map(function(ingredient, ingredientIndex) {
                        return (
                            <tr key={ingredientIndex}>
                                <td>{ingredient.name}</td>
                                <td>{ingredient.amount}</td>
                                <td>{ingredient.unit}</td>
                            </tr>
                        );
                    })}
                    </tbody>
                </table>
            </div>
        ) : (
            <div>Loading...</div>
        );
    }
}


import React，{Component}来自“React”；
从“axios”导入axios；
导出类可结果扩展组件{
建造师（道具）{
超级（道具）；
此.state={
fetchedJson:{}，
isLoaded:false
};
}
componentDidMount（）{
//将副作用（API调用）移动到componentDidMount
this.handleSubmit（this.props.recipeList）；
};
handleSubmit（选定的规格）{
如果（！this.state.isLoaded）{
让url=
"http://localhost:8080/ingredients/?recipes=" +
selectedRecipes.join（“，”）；
get（url）。然后（res=>{
这是我的国家({
fetchedJson:res.data，
isLoaded：正确
});
});
}
}
render（）{
//在尝试渲染数据之前，请检查是否已收到数据
是否返回此.state.isLoaded(
成分
{this.state.fetchedJson.responseData.map（函数（成分，IngreditIndex））{
返回(
{component.name}
{成分.数量}
{成分单位}
);
})}
) : (
加载。。。
);
}
}
尝试
console.log（res.data）
或console日志状态，以检查正在更新的内容state@sumanthmadishetty这完全值得先检查一下。我的假设是，
res.data
可能是需要使用
map（）
的数组本身，但这只是一个猜测。我们需要查看
res.data
的结果。为什么要调用
this.handleSubmit（this.props.recipeList）内部呈现函数？在构造函数中定义
this.state={fetchedJson:[]}
。因此，在第一次渲染时，当API还没有被调用时，就不存在this.state.fetchedJson.responseData这样的东西。因此，您正在调用
undefined.map（）
，并且正如错误告诉您的那样，
undefined
没有
.map
属性。