更新状态后立即渲染状态(反应)

时间:2020-07-23 17:47:21

标签: reactjs

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

    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>
    )
}

现在我正在使用模拟数据,因为如果不这样做,由于.current.temperature属性不存在(因为设置状态尚未更新),我将收到错误消息。 在设置状态已更新之前,如何停止错误并停止返回div或至少停止错误并返回empy div或其他内容。

3 个答案:

答案 0 :(得分:1)

您可以做的是在您的退货中添加一个条件。

尝试一下:

return (
  <div>
    <h1>Weather</h1>
    <p>Temperature: {(data && data.current) ? data.current.temperature : ""}</p>
  </div>
)

您也可以使用optional chaining获得相同的结果。


return (
  <div>
    <h1>Weather</h1>
    <p>Temperature: {data?.current?.temperature || ""}</p>
  </div>
)

答案 1 :(得分:0)

在引用data之前,需要检查data.current是否存在,并且在引用data.current之前需要检查data.current.temperature是否存在。如果您访问undefined的属性,则代码将崩溃。

您需要具有一些其他状态,例如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>
    )
}

答案 2 :(得分:-1)

您放了 在return内部:

{data.current.temperature==="loading"?
 <div>LOADING</div> : 
<div>
            <h1>Weather</h1>
            <p>temperature: {data.current.temperature}</p>
</div>