React.js：陣列不會在螢屏上列印，但console.log()作業正常

我有一個 Register.js 組件，它向 express.js 后端發送請求，然后由 express-validator 驗證并回傳一個如下所示的物件：

data: {
  success: Boolean,
  errors: array()
}

注冊.js

import React, {useState} from "react";
import { Link } from "react-router-dom";

const RegisterForm = () => {
    
    const [username, setUsername] = useState("");
    const [password, setPassword] = useState("");
    const [errors, setErrors] = useState([]);
    const [token, setToken] = useState("");

    const handleFormSubmit = (e) => {
        e.preventDefault();

        const formFields = {
            name: username,
            password: password
        }

        const requestOptions = {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
           
            body: JSON.stringify(formFields)
        };

        fetch('http://localhost:5000/add_user', requestOptions)
        .then(response => response.json())
        .then(data => {
            if (data.success === false) {
                if(data.errors) {
                    return setErrors(data.errors);
                }
                if(data.single_error) {
                    return setErrors([...errors, data.single_error]);
                } 
            }
          
            if(data.success === true) {   
              setErrors([]);

              //Redirect to login
              console.log("Success");
            }

        })
    }
        return( 
                <div className="login register">
                    <h1>Register</h1>
                    <form onSubmit={handleFormSubmit}>
                        <label>
                        <i className="fa fa-user-o" aria-hidden="true"></i>
                        </label>
                        <input type="text" name="username" 
                            value={username}
                            onChange={e => setUsername(e.target.value)}
                            placeholder="Username" id="username" required />

                        <label>
                        <i className="fa fa-unlock-alt" aria-hidden="true"></i>
                        </label>
                        <input type="password" name="password"  
                            value={password}
                            onChange={e => setPassword(e.target.value)}
                            placeholder="Password" id="password" required />

                            {errors ? errors.map((item, key) => (
                            //    <li key={key}>{item}</li>
                               console.log(item)
                            )) : null}

                        <input type="submit" value="Register" />
                    </form>

                    <Link className="register-link" to="/"><small>Login &#129046;</small></Link>
                </div>
        )

}

export default RegisterForm;

任何想法為什么這會 console.log 但不會在螢屏上列印資料？這是我的 console.log 值的螢屏截圖：https ://prnt.sc/ig6F2O1S1L1L 如果我嘗試映射陣列并回傳串列中的值，我不會收到任何錯誤，只是沒有任何反應。

uj5u.com熱心網友回復：

<li>HTML 元素用于表示串列中的專案。它必須包含在父元素中：有序串列 ( <ol>)、無序串列 ( <ul>) 或選單 ( <menu>)。

<ul>
       {errors ? errors.map((item, key) => (
                                    <li key={key}>{item}</li>
                                   //console.log(item)
                                )) : null}
</ul>

標籤：javascript 反应

上一篇：從狀態中提取資料時無法讀取null的屬性

下一篇：如何使用<hr>標簽創建垂直分隔線，可以動態調整其相對于左側元素的高度？