我只是想知道如何在状态更新之前阻止函数返回-这是我的代码,因此我可以更清楚地解释。
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或其他内容。
答案 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>