时间戳

首页 > 解决方案 > 使用 React 在 app.js 中获取错误“返回未定义”（“数据未定义”）

reactjs - 使用 React 在 app.js 中获取错误“返回未定义”（“数据未定义”）

问题描述

我正在开发一个节点 js 和反应应用程序。我正在尝试从后端获取以下数据集：

    [{"name":"nameonehere#1"},{"name":"nameonehere#2"},
{"name":"nameonehere#3"},{"nameonehere#4"},...,{"name":"nameonehere#xxx"}]

这是我的 app.js：

class App extends Component {
state = {
    data: null,
    loading: true,
    error: false
  };

    componentDidMount() {
    fetch('http://localhost:5000/getData')
      .then(res => {
        if (!res.ok) {
          throw res;
        }
        return res.json()
      }).then(data => {
        // setState triggers re-render
        this.setState({loading: false, data});
      }).catch(err => {
        console.error(err);
        this.setState({loading: false, error: true});
      });
  }

  render() {
    return (
      <div className="App">
...
            <div>
        {this.state.loading ? <p>Loading...</p>
          : this.state.error ? <p>Error during fetch!</p>
          : (
              <ul>
                this.state.data.map(data =>
                <div key={data.id}>data: {data.name}</div>)
              </ul>
            )}
            </div>
      </div>
    );
  }
}

我有以下错误'data' is not defined

错误是第 80 行，这是这行代码：

<div key={data.id}>data: {data.name}</div>)

我尝试了一些东西，但没有任何效果。我在 JS 和 JSX 之间有点迷茫。

问题是什么？

标签： reactjsfetch

解决方案

{ }你在做的时候忘记打开this.state.data.map

它正在考虑将其作为文本并在key尝试获取data变量时失败。

您应该像这样添加括号：

<ul>
    {
        this.state.data.map(data => <div key={data.id}>data: {data.name}</div>)
    }
</ul>

推荐阅读