通过 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 Test

const 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 Info

const 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.datatest info直接更新res.data_const setTestInfo = (name, desc) => {&nbsp; &nbsp; if (name) {&nbsp; &nbsp; &nbsp; &nbsp; setTestName(name);&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; setTestName(test.name);&nbsp; &nbsp; }&nbsp; &nbsp; if (desc) {&nbsp; &nbsp; &nbsp; &nbsp; setTestDesc(desc)&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; setTestDesc(test.desc);&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;}res.data并使用值从 api 调用它setTestInfo(res.data.name, res.data.desc)