状态未在 React Hooks 的使用效果中得到更新

Question

This is the code I am using. Response is totally correct. But setState methods not updating the state and showing me the initial states that are "". What i am doing wrong? I am using them but this occurred for the very first time.

• "React": "^16.2.0"
• "react-dom": "^16.2.0"

const [name, setName] = useState("");
const [gender, setGender] = useState("");
const [skillSet, setSkillSet] = useState([]);
const [dob, setDob] = useState("");
useEffect(() => {
    async function getStudent() {
        try {
            const { data } = await axios.get("/student/1");
            const student = data[0];
            const skills = data[1];
            console.log(student[0]);
            const { name: n, dob: d, gender: g } = student[0];
            setName(n);
            setGender(g);
            setDob(d);
            console.log("Logging Name", name);
            console.log(n);
            alert(name);
        } catch (error) {}
    }
    getStudent();
}, []);

EDIT

Here is my complete component whose snippet i posted above. So can you guide me on this? Otherwise i have to return to class components

import React, { useState, useEffect } from "react";
import BaseInputComponent from "../Utils/InputComponentMaterialUi";
import BaseSelect from "../Utils/SelectComponentMaterialUi";
import instruments from "../InstrumentNames";
import BaseCheckBox from "../Utils/CheckBoxMaterialUi";
import axios from "axios";


const StudentProfile = () => {
    const [name, setName] = useState("");
    const [gender, setGender] = useState("");
    const [skillSet, setSkillSet] = useState([]);
    const [dob, setDob] = useState("");
    useEffect(() => {
        async function getStudent() {
            try {
                const { data } = await axios.get("/student/1");
                const student = data[0];
                const skills = data[1];
                console.log(student[0]);
                const { name: n, dob: d, gender: g } = student[0];
                setName(n);
                setGender(g);
                setDob(d);
                console.log("Logging Name", name);
                console.log(n);
                alert(name);
            } catch (error) {
                console.log(error);
                console.log("Hi");
            }
        }
        getStudent();
    }, []);
    return (
        <div className="container" style={{ marginTop: "5rem" }}>
            <form>
                <div className="row">
                    <div className="col-md-6 col-12 col-lg-6">
                        <BaseInputComponent
                            value={name}
                            changeHandler={setName}
                            label={"Musician's Name"}
                        />
                    </div>
                    <div className="col-md-6 col-12 col-lg-6">
                        <BaseInputComponent
                            changeHandler={setDob}
                            value={dob}
                            type="date"
                            label={"Date Of Birth"}
                            InputLabelProps={{
                                shrink: true
                            }}
                        />
                    </div>
                    <div className="col-md-6 col-12 col-lg-6">
                        <BaseSelect
                            label={"Choose Gender"}
                            value={gender || ""}
                            changeHandler={setGender}
                            options={[
                                { label: "Male", value: "Male" },
                                { label: "Female", value: "Female" },
                                { label: "Other", value: "Other" }
                            ]}
                        />
                    </div>
                    <div className="col-md-6 col-12 col-lg-6">
                        <BaseInputComponent label={"Osama Inayat"} />
                    </div>
                </div>
                <button type="submit" className="btn submit-button">
                    Update Profile Infomation
                </button>
                <br />
                <br />
                <br />
            </form>
            <div style={{ width: "100%", height: "2px", background: "gray" }}>
                <h2 className="text-center">Select Instruments You Played</h2>
                <form>
                    <div className="row">
                        {instruments.map((name, i) => (
                            <div className="col-md-3 col-6">
                                <BaseCheckBox
                                    skillSet={skillSet}
                                    setSkillSet={setSkillSet}
                                    key={i}
                                    label={name}
                                    value={i}
                                />
                            </div>
                        ))}
                    </div>
                </form>
            </div>
            <button onClick={() => console.log(skillSet)}>Show Object</button>
        </div>
    );
};

export default StudentProfile;

Answer 1

To expand upon my comment – a minimized example with the same idea (without async , since the version of Babel on Stack Overflow doesn't support it, sigh) works fine, so the issue is likely in the components you use within StudentProfile , not in your hooks:

 function pretendAxios() { return Promise.resolve({ data: [[{ name: "foo", dob: "1234-1234", gender: "bar" }], ["skill"]] }); } const StudentProfile = () => { const [name, setName] = React.useState(""); const [gender, setGender] = React.useState(""); const [skillSet, setSkillSet] = React.useState([]); const [dob, setDob] = React.useState(""); React.useEffect(() => { pretendAxios().then(({ data }) => { const student = data[0]; const skills = data[1]; const { name: n, dob: d, gender: g } = student[0]; setName(n); setGender(g); setDob(d); }); }, []); return <div>{JSON.stringify({ name, gender, skillSet, dob })}</div>; }; ReactDOM.render(<StudentProfile />, document.getElementById("root"));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script> <div id="root"></div>

Answer 2

    <TextField
        onChange={e => changeHandler(e.target.value)}
        id="standard-required"
        label={label}
        defaultValue={value}
        className={classes.textField}
        margin="normal"
        name={name}
        id={id}
        style={{ width: "100%" }}
        {...rest}
    />

The above code i had written in me BaseInput component after changing defaultValue to value my problem solved thanks to @AKX for pointing out the problem