我创建了一个简单的示例https://codesandbox.io/s/4zq852m7j0。
正如您所看到的,我正在从远程源获取一些数据。我想使用返回值作为文本字段内的值。
const useFetch = () => {
const [value, setValue] = useState("");
useEffect(
async () => {
const response = await fetch("https://httpbin.org/get?foo=bar");
const data = await response.json();
setValue(data.args.foo);
},
[value]
);
return value;
};
然而,在useState
函数内部使用值是无效的。我认为useState
仅在第一次渲染时使用默认值。在第一次渲染时,该值显然未设置,因为它是异步的。文本字段应该具有值bar
,但实际上为空。
function App() {
const remoteName = useFetch();
// i want to see the remote value inside my textfield
const [name, setName] = useState(remoteName);
const onChange = event => {
setName(event.target.value);
};
return (
<div className="App">
<p>remote name: {remoteName}</p>
<p>local name: {name}</p>
<input onChange={onChange} value={name} />
</div>
);
}
从远程获取值后,我希望能够在本地进行更改。
有什么想法吗?
bar
是一个空字符串(删除文本字段中的值)时,整个组件都会消失。 - zemircouseState()
并进行name != null && ...
检查。 - Estus Flask