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

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

Answer 2

也许用户是一个数组，但是当react呈现时，您的jsx用户为空，因为它尚未完成获取数据的操作，这意味着用户为空或未定义。要再次尝试，请先尝试是否定义了用户数组

<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）之前使用此关键字。使用地图时，您可以使用Optional chaining检查地图是否未定义或为空。

所以会是这样：

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

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

3 个答案: