通过 API 调用设置的状态值有时不会显示在页面上（或表单组件上）

Question

这就是我想做的：get test info from api > receieve test info > store it on an object "test" > set states "test_title" and "test_desc"> put both "test_name" and "test_desc" as values on my form从 api 获取测试信息：useEffect(() => {    fetchTest()}, [])const [test, setTest] = useState({})const [test_name, setTestName] = useState("")const [test_desc, setTestDesc] = useState("")// Fetch Testconst fetchTest = () => {    let test_code = params.code    const url = ...url here...    axios.get(url)    .then(res => {        if (res.status == 200) {            setIsGettingData(false)            setTest(res.data)            // Set Test Name and Desc            setTestInfo()        }    })    .catch(err => {        console.log(err.response)    })}这用于更新从 api 调用接收数据后调用的test_nameand ：test_desc// Set Test Infoconst setTestInfo = () => {    setTestName(test.name)    setTestDesc(test.desc)}我的表格：<form id="form_test">     <input type="text" value={test_name} onChange={e => setTestName(e.target.value)} className="form-control mb-2" placeholder="test name" />     <textarea className="form-control" value={test_desc} onChange={e => setTestDesc(e.target.value)} placeholder="test description"></textarea></form>问题是有时输入显示实际的test_name和test_desc，有时则不显示。当我控制台记录它时，它有时会显示实际值，有时会显示未定义。当在页面上正常显示它时{test_name}，就像 一样，有时显示，有时不显示。我想这可能是因为api调用？就像有延迟或其他什么情况一样，我猜 DOM 在保存或接收数据之前就已经渲染了所有内容？我不知道。对此有何建议？多谢！

Answer 1

这里的问题是test尚未设置res.data

test info直接更新res.data_

const setTestInfo = (name, desc) => {

    if (name) {

        setTestName(name);

    } else {

        setTestName(test.name);

    }

    if (desc) {

        setTestDesc(desc)

    } else {

        setTestDesc(test.desc);

    }    

}

res.data并使用值从 api 调用它

setTestInfo(res.data.name, res.data.desc)