在第一次渲染时，数据在控制台日志中显示为空

Question

我正在使用 useEffect 并在第一次渲染时填充我的状态

 const [data, setData ] = useState({});
const [isLoading, setIsLoading] = useState(false);


 useEffect(() => {
   fetchData();
 }, [])

 const fetchData = async () => {
        setIsLoading(true)
        await sanityAPI.fetch(
            `url/ToGetData`
          ).then((res) => {
            setData(res)
            setIsLoading(false)
          }).catch((err) => {
              console.log(err)
          });
 }

第一次呈现页面时，如果我在 useEffect 数据中 console.log(data,'first time')，它会给我 null

但是第一次之后，如果我去 console.log(data,'second time') 中添加另一个字符串，并保存它，数据显示在 console.log 上。

非常感谢。

Answer 1

你说的真的没办法。您需要等到您的数据被获取，然后您才能执行那些依赖于该数据的功能。您可以添加一个额外的 useEffect 来处理在获取数据并设置为状态后要执行的操作。

就个人而言，有时我发现最初将数据设置为 null 比空对象更容易。如果您的数据可用，这使得检查 useEffect、JSX 代码等变得容易。否则，您每次都必须执行类似 Object.keys(data).length > 0 的操作，以查看是否可以使用您的数据。

我还重写了您的一些代码，因为您可能不应该将 await 与 then 混合使用。

const [data, setData ] = useState(null);
const [isLoading, setIsLoading] = useState(false);


 useEffect(() => {
   fetchData();
 }, [])

 useEffect(() => {
   if(data) {
     // do stuff here
   }
   
 }, [data])

 const fetchData = async () => {
    try {
      setIsLoading(true)
      const res = await sanityAPI.fetch(`url/ToGetData`)
      setData(res)
    } catch(error) {
      console.log(error) 
    } finally {
      setIsLoading(false)
    } 
 }

return (
  <div>
   ...bunch of code

   {
     data && <div>{data.foo}</div>
   }
  </div>
)

在第一次渲染时，数据在控制台日志中显示为空

on first render, data shows null on console log

javascript

reactjs

gatsby