如何检查 Next-Js 组件状态？

Question

所以我将 react-placeholder 包添加到我的组件中，但这需要 ready 参数采用 this.state.ready，nextjs 的等效项是什么？

当我在组件中尝试 console.log(this) 时，我只是得到“未定义”。

Answer 1

Ready 只是一个传递给组件的真/假布尔值。

示例

const [ ready, setReady ] = useState(false);

useEffect(() => {
   getData(); //fetch data on first load
},[])

const getData = async () => {
   const data = await fetch(api endpoint);
   if (data) return setReady(true) //data is ready
}

然后您可以使用以下内容，一旦 API 中的数据准备就绪，占位符将隐藏。

<ReactPlaceholder ready={ready}>