Javascript 我正在传递道具，但我看不见它们

因此，我正在传递一些保存在状态中的数据。然后我尝试将这些信息作为道具传递给另一个组件。但是，当I console.log时，它显示为未定义

以下是我传递信息的页面：

import React, { useState } from 'react'
import { Link } from 'react-router-dom'
import axios from 'axios'
import IpContext from '../../IpContext'
import { useContext } from 'react';
import ReactDOM from 'react-dom';
import PostIssues from '../Trainee/PostIssues/PostIssues';

const LoginPage = props => {
const [userDetails, setuserDetails] = useState([]);
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const [memberType, setMemberType] = useState("");


    const getLogin = (e) => {
        e.preventDefault();
        if (memberType === "trainee") {
            axios.get("http://" + ip + "/trainee/findByUsername/" + username)
                .then(response => {
                    setuserDetails(response.data);
                    console.log(userDetails)
                    console.log(response.data.id);
                }).catch(error => {
                    console.log(error)
                });
        } else {
            console.log("ignore")
        }
    }

    const validate = (e) => {
        if (userDetails.username === username && userDetails.password === password) {
            props.history.push("/postIssue");
            // userDetails[0].map((issue) => (
            <PostIssues
                // number={number}
                userDetails={userDetails}
            />
        }
        else {
            e.preventDefault();
            ReactDOM.render(<p style={{ color: "red" }}>Username/Password wrong</p>, document.getElementById('failed-message'));

        }
    }
return (
        <>

            <div className="loginDiv">
                <h1 className="loginHeading">Login</h1>
                <div>
                    <form className="ml-3" id="loginForm" onSubmit={validate}>
                        <input name="username" className="loginInput" type="text" id="username" placeholder="Enter your username" onChange={e => setUsername(e.target.value)} required></input> <br></br>
                        <input name="password" className="loginInput" type="password" id="password" placeholder="Enter your password" onChange={e => setPassword(e.target.value)} required></input> <br></br>
                        <select defaultValue="" name="traineeTrainer" onInput={e => setMemberType(e.target.value)} onChange={getLogin} >
                            <option value="" disabled hidden >Position</option>
                            <option value="trainer">Trainer</option>
                            <option value="trainee">Trainee</option>
                        </select>
                        <button className="btn btn-primary" id="loginButton" type="submit">Login</button>
                        <div>
                            <Link to="/createAccount">
                                <button style={{ backgroundColor: "darkred" }} className="btn btn-primary" id="signUpButton" type="button">Create an account</button>
                            </Link>
                        </div>
                    </form>
                </div>
            </div>

            {/* Login failed will appear here */}
            <div id="failed-message"></div>
        </>
    )
}

export default LoginPage

当我在浏览器上运行这个程序时，我得到一个错误，上面写着

TypeError:无法读取未定义的属性“username”

如果我将它作为道具传递，为什么它没有定义

---

提前谢谢

您实际上并没有返回任何内容，即使其中有一个

return（）

。请尝试

return（null）

并阅读以了解原因

此外，我建议您尝试使用浏览器中的开发人员工具对此进行调试。它们非常方便，可以让你检查道具和状态

---

尝试在return语句中的

中呈现

props.userDetails.username

，以查看呈现组件的页面。

您没有从

LoginPage

组件返回任何内容，因此它不会呈现任何内容。我正在调用一个return语句，我现在已经更新了它。请查收。非常感谢。这回答了你的问题吗？此外，您正在使用数组

useState（[]）

初始化状态，然后将其作为单个对象

userDetails.username

。您正在使用回调中的

ReactDOM.render

手动操作DOM，这是React中的一种反模式。jQuery过去是这样工作的，但React是数据驱动的。使用错误更新某些状态，并在渲染周期中渲染一次。

import React, {useState, useEffect} from 'react'
import axios from 'axios'
import Issue from '../../Trainer/Issue';
import IpContext from '../../../IpContext'
import { useContext } from 'react';

const PostIssues = props => {

    console.log(props.userDetails.username);

return(
)
}

export default PostIssues;