Question

我正在处理Node 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之间有点迷路了。

出了什么问题？

Answer 1

您进行{ }时忘记打开this.state.data.map

正在考虑将其作为文本并在key上尝试获取一个data变量。

您应该这样添加方括号：

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

Answer 2

在JSX中编写表达式时，将其用花括号括起来因此，您需要这样将地图包装在其中

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

希望这会有所帮助

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

2 个答案: