Reactjs 更新状态后立即呈现状态（react）

我只是想知道如何在状态更新之前阻止函数返回-这是我的代码，以便我能更清楚地解释

    const mockData = {
    current: {
        temperature: 'loading'
    }
}
export default function Weather({ city }) {
    const [data, setData] = useState(mockData)
    const url = `http://api.weatherstack.com/current?access_key=2cbe1b14f771abee0713f93317e1b107&query=${city}`
    useEffect(() => {
        axios.get(url).then(({ data }) => {
            setData(data, () => { })
        })
    }, [])

    return (
        <div>
            <h1>Weather</h1>
            <p>temperature: {data.current.temperature}</p>

        </div>
    )
}

const mockData={
当前：{
温度：'加载'
}
}
导出默认函数Weather（{city}）{
const[data，setData]=useState（mockData）
常量url=`http://api.weatherstack.com/current?access_key=2cbe1b14f771abee0713f93317e1b107&query=${city}`
useffect（（）=>{
get（url）.then（{data}）=>{
setData（数据，（）=>{}）
})
}, [])
返回(
天气
温度：{data.current.temperature}

)
}

现在我正在使用mockData，因为如果我不使用，我将得到一个错误，因为.current.temperature属性不存在（因为设置状态尚未更新）。

---

如何在设置状态更新之前停止错误并停止返回的div，或者至少停止错误并返回empy div或其他内容。

您可以在返回中添加条件

试试这个：

返回(
天气
温度：{（data&&data.current）？data.current.Temperature:}

)

您也可以使用来实现相同的结果

返回(
天气
温度：{data？.current？.Temperature | |“”}

)

在引用

数据.current

之前，您需要检查

数据是否存在，并且在引用
数据.current.temperature
之前，您需要检查
数据.current
是否存在。如果访问
未定义的属性
，代码将崩溃

您需要有一些附加状态，例如
isLoading

如果你想进行黑客攻击，你可以这样做：


export default function Weather({ city }) {
    const [data, setData] = useState(mockData)
    const url = `http://api.weatherstack.com/current?access_key=2cbe1b14f771abee0713f93317e1b107&query=${city}`
    useEffect(() => {
        axios.get(url).then(({ data }) => {
            setData(data, () => { })
        })
    }, [])

    function renderTemperature() {
      if (!data) {
        return null;
      } else if (data && !data.current) {
        return null;
      } else if (data.current && data.current.temperature) {
        return <p>temperature: {data.current.temperature}</p>
      }
    }
    return (
        <div>
            <h1>Weather</h1>
            { renderTemperature() }
        </div>
    )
}

Much better solution:


export default function Weather({ city }) {
    const [data, setData] = useState(null)
    const [isLoaded, setIsLoaded] = useState(false);
    const url = `http://api.weatherstack.com/current?access_key=2cbe1b14f771abee0713f93317e1b107&query=${city}`
    useEffect(() => {
        axios.get(url).then(({ data }) => {
            setData(data, () => { })
            setIsLoaded(true);
        })
    }, [])

    function renderTemperature() {
    }
    return (
        <div>
            <h1>Weather</h1>
            { isLoaded ? <p>temperature: {data.current.temperature}</p> : null}
        </div>
    )
}


导出默认函数Weather（{city}）{
const[data，setData]=useState（mockData）
常量url=`http://api.weatherstack.com/current?access_key=2cbe1b14f771abee0713f93317e1b107&query=${city}`
useffect（（）=>{
get（url）.then（{data}）=>{
setData（数据，（）=>{}）
})
}, [])
函数renderTemperature（）{
如果（！数据）{
返回null；
}else if（data&&！data.current）{
返回null；
}else if（data.current&&data.current.temperature）{
返回温度：{data.current.temperature}

}
}
返回(
天气
{renderTemperature（）}
)
}
更好的解决方案：
导出默认函数Weather（{city}）{
const[data，setData]=useState（null）
const[isLoaded，setIsLoaded]=useState（false）；
常量url=`http://api.weatherstack.com/current?access_key=2cbe1b14f771abee0713f93317e1b107&query=${city}`
useffect（（）=>{
get（url）.then（{data}）=>{
setData（数据，（）=>{}）
setIsLoaded（真）；
})
}, [])
函数renderTemperature（）{
}
返回(
天气
{isLoaded？温度：{data.current.temperature}
：null}
)
}
这是个好主意谢谢，这是标准吗？我不确定我所做的是不是有问题-我对表单的输入也有同样的问题，但我必须解决这个问题。更好的做法可能是使用某种布尔标志指定正在获取数据，然后使用某种加载UI在获取时显示。有点像'const=[loading，setLoading]=useState（true）'？然后仅当布尔值通过useStateYep几乎更新为true时才返回！然后，您可以在获取数据（在useEffect内）的承诺的Then部分内设置loading（false），类似地，根据您的UI，您可能需要常量[errored，setErrored]=useState（false）；然后在获取承诺中添加一个.catch，并在其中设置errored（true）。干杯，我现在正在使用类似的东西-但是我还没有为isLoaded获取任何状态。有什么原因说明使用状态比只执行此操作要好吗温度：{data.current？data.current.temperature:'loading'}
@ST除了
数据.current.temperature
之外，您可能还有更深层的嵌套。想象一个对象，如
{data:{current:{temperature:{actual:50，windchill:40}}}
-如果有4层深，您需要使三元函数更加混乱。