无法使用 Array.map 在 React 中渲染出数组

Question

我使用 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>

Answer 1

您需要首先检查属性 users 是否存在： !!state.users && state.users.map(function (user) { 。

Answer 2

也许 users 是一个数组，但是当 react 呈现您的 jsx users 时，您的 jsx 用户是空的，因为它还没有完成获取您的数据，这意味着 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>

Answer 3

如果你的组件是类组件，你应该在 state(this.state.users) 之前使用 this 关键字。 使用 map 时，您可以使用Optional chaining检查它是 undefined 还是 null。

所以它会是这样的：

{ this.state?.users.map(function (user) {
                                return <option key={user} value={user}>{user}</option>
                            })
}