使用 React 在应用程序中获取错误'return undefined'.js("数据未定义")

Question

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

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

这是我的应用程序.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时忘记打开{ }

它将其视为文本并在试图获取data变量的key上失败。

您应该像这样添加括号：

<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>
}

希望这有帮助