我正在努力琢磨一个愚蠢的错误,希望有人能帮助我更好地理解它。
setServerList(data.data)没有设置数据,当我尝试使用它时,它仍然是空的。
export const KernelUpdateSearch = (props: RouteComponentProps) => {
const [serverList, setServerList] = useState<any>([]);
// searchHost perform GET request to gannet for aggregate count
const searchHost = async (hostRegex: string) => {
try {
const response = await fetch("URL", {
mode: 'cors',
method: 'GET',
headers: requestHeaders
});
const data = await response.json();
if (data.success === true) {
if (data.data != null && (data.data.length > 0)) {
setServerList(data.data);
} else {
setServerList([])
console.log('no data found, status code: ', response.status);
}
} else {
console.log("failed to query, error: ", data.error.message);
}
} catch (error) {
console.log(error);
}
};
const handleSubmit = (formInstance: FormEventReturn) => {
handleChange(formInstance)
};
const handleChange = ({formData}: FormEventReturn) => {
searchHost(formData.hostname);
console.log(serverList);
};
return (
<Card options={searchOptions}>
<Form
schema={searchSchema}
uiSchema={uiSchema}
onSubmit={handleSubmit}
/>
</Card>
);
};
1条答案
按热度按时间tzdcorbm1#
我如何设置ServerList在handleChang事件后是持久的。
您有两个选项:
编辑
无论您是否需要将
serverList
作为状态变量,都可以考虑使用此重构来提高可读性(即减少混淆):通常,事件处理程序应该小而简单。在
useEffect
中包含一些东西是一种抽象,它允许您通过任何方式更新列表,并在一个中心位置进行处理。