如何修复TypeError: this.state.Templatelist.map不是react中的函数?

Question

我需要显示来自webapi的JSON数据。我需要用REACT中的数据填充下拉框。我在填写数据时遇到了问题。

console.log(this.state.Templatelist)返回数据。此数据来自api.

[{"Template_ID" 11日"TemplateName":"All"},{"Template_ID" 21日"TemplateName":"Test"}]

请查找我的代码:

import React from "react";
export class test extends React.Component {
constructor(props) {
super(props);
this.state = {
CopyFromTemplate_ID: "",
Templatelist: [],
}
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({ CopyFromTemplate_ID: event.target.value });
console.log(event.target.value)
}

componentDidMount() {
this.getTemplateList();
}
getTemplateList() {
fetch(REQUEST_URL)
.then(response => response.json())
.then((data) => {
this.setState({
Templatelist: data,
loading: false
})
console.log(this.state.Templatelist);
})
}
render() {
return (
<div>
<form onSubmit={this.handleSubmit} >
{this.state.Templatelist}
<select size="1" value={this.state.CopyFromTemplate_ID} onChange={this.handleChange} >
<option></option>
{this.state.Templatelist.map((item) =>
<option id={item.Template_ID} value={item.Template_ID}>
{item.value}
</option>)
}
</select>
</form>
</div>
);
}
}

export default test;

感谢

Answer 1

由于您的数据未定义或等待到达，因此您需要在呈现它之前检查它是否是一个数组。你可以检查数据是否到达，是否有长度，如果没有，则渲染正在加载的组件。

{this.state.Templatelist.length? this.state.Template.map((item) =>
<option id={item.Template_ID} value={item.Template_ID}>
{item.value}
</option>) : <p>...loading</p>
}