React Hooks:获取数据后初始化本地状态
React Hooks:获取数据后初始化本地状态
提问于 2020-12-16 16:18:46
给定一个简单的checkbox组件，我希望在一些异步数据获取完成并满足条件后设置“选中”一次。
如何修改下面的示例来实现这一点？现在，"checked“不能设置为"false”，因为总是满足条件，因此总是"true“。
import React, { useEffect, useState } from "react";
const asyncFetch = () => "blub";
export default function App() {
const [checked, setChecked] = useState(false);
const callFromSpace = asyncFetch();
useEffect(() => {
if (callFromSpace === "blub") {
setChecked(true);
}
}, [checked, callFromSpace]);
return (
<div className="App">
<p>{callFromSpace}</p>
<input
type="checkbox"
checked={checked}
onChange={(e) => setChecked(e.target.checked)}
/>
</div>
);
}编辑:组件中的其他地方也需要"callFromSpace“，所以不能封装在"useEffect”中。
回答 3
Stack Overflow用户
回答已采纳
发布于 2020-12-16 16:28:09
useEffect(() => {
if (callFromSpace === "blub") {
setChecked(true);
}
}, [callFromSpace]); // 'checked' should be excluded.当您更新checked时，它会影响useEffect()最终setChecked(true)再次调用...
因此，您应该在useEffect()的依赖项上排除checked。
Stack Overflow用户
发布于 2020-12-16 16:37:03
正确的做法是将异步函数放入Effect中
import React, { useEffect, useState } from "react";
const asyncFetch = () => "blub";
export default function App() {
const [checked, setChecked] = useState(false);
const [tryCheck, setTryCheck] = useState(false);
useEffect(() => {
const fetchFromSpace = async () => {
const response = await asyncFetch();
if (callFromSpace === "blub") {
setChecked(true);
}
}
if(tryCheck){
fetchFromSpace();
}
}, [tryCheck]);
return (
<div className="App">
<input
type="checkbox"
checked={checked}
onChange={(e) => setTryCheck(e.target.checked)}
/>
</div>
);
}Stack Overflow用户
发布于 2020-12-16 16:48:53
如果您只需要执行一次检查，并且看起来并不依赖于它，那么只需运行useEffect一次，并直接在其中调用异步函数。
import React, { useEffect, useState } from "react";
const asyncFetch = async () => "blub"; // This function need to return a promise
export default function App() {
const [checked, setChecked] = useState(false);
useEffect(() => {
asyncFetch().then(response => {
if (callFromSpace === "blub") {
setChecked(true); // Will update your state as soon as your request returns
}
});
}, []); // No dependency, will only run once
return (
<div className="App">
<input
type="checkbox"
checked={checked}
onChange={(e) => setChecked(e.target.checked)}
/>
</div>
);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65319543
复制相关文章
相似问题
腾讯云开发者
