无法使用Array.map在React中呈现数组
无法使用Array.map在React中呈现数组
提问于 2020-09-28 17:36:04
我使用axios获取用户名数组，并使用setState更新状态。我已将users记录到控制台，以确保它是一个阵列。
axios.get("http://localhost:5000/users/")
.then((res) => {
if (res.data.length > 1) {
const users = res.data.map(el => el.username);
setState((preValue) => {
return {
...preValue,
users : users
}
})
console.log(state)
}
})
.catch((err)=>console.log(err)) 当它在JSX中呈现出来时。数组的map方法返回未定义的错误。但是，可以将数组呈现为字符串。
<h3>Edit Exercise</h3>
<form onSubmit={onSubmit}>
<div className="form-group">
<label>Username: {state.users}</label>
{/* <select required className="form-control"
value={state.username} onChange={onChangeUsername}>
{
state.users.map(function (user) {
return <option key={user} value={user}>{user}</option>
})
}
</select> */}
</div>回答 3
Stack Overflow用户
回答已采纳
发布于 2020-09-28 17:47:43
也许users是一个数组，但是当react呈现jsx时，users是空的，因为它没有完成获取数据，这意味着users是空的或未定义的。如果定义了用户数组，则第一次尝试返回
<div className="form-group">
<label>Username: {state.users}</label>
{/* <select required className="form-control"
value={state.username} onChange={onChangeUsername}>
{
state.users && state.users.map(function (user) {
return <option key={user} value={user}>{user}</option>
})
}
</select> */}
</div>
如果不起作用，您还可以检查长度
<div className="form-group">
<label>Username: {state.users}</label>
{/* <select required className="form-control"
value={state.username} onChange={onChangeUsername}>
{
state.users.length > 0 && state.users.map(function (user) {
return <option key={user} value={user}>{user}</option>
})
}
</select> */}
</div>
Stack Overflow用户
发布于 2020-09-28 17:41:20
您需要首先检查属性users是否存在：!!state.users && state.users.map(function (user) {。
Stack Overflow用户
发布于 2020-09-28 17:50:55
如果您的组件是类组件，则应在状态(this.state.users)之前使用此关键字。在使用map时，您可以使用Optional chaining检查它是未定义的还是null。
因此，它将是这样的：
{ this.state?.users.map(function (user) {
return <option key={user} value={user}>{user}</option>
})
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64099572
复制相关文章
相似问题
腾讯云开发者
