我有一个下面的自定义 useEffect
Hook 来从 API 获取数据。
export const useGetData = (url, body, isNew) => {
const [state, setState] = useState([]);
const [error, setError] = useState({});
useEffect(() => {
if (isNew) {
fetch(url, {
method: 'Post',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(body)
}).then(response => response.json())
.then(apiData => {
setState({ apiData });
}).catch(error =>
console.error('Error:', error)
);
setError(error);
console.log("Error: " + error);
return error;
}
}, []);
return state;
}
现在,在我的组件中,我尝试在 handleInputChanges
事件之后使用上面的钩子(Hook),如下所示
let dt = {};
const [inputParam, setInputParam] = useState({
FirstName: 'Tom',
LastName : 'Harris'
});
const handleInputChanges = (params) =>{
setInputParam(params);
};
dt = useGetData (url, inputParam, true);
使用上面的代码,我可以点击 useGetData
自定义 Hook ,但是 Hook 不会调用 API url,因此数据 dt
不会更新。怎么了?请推荐。
最佳答案
您没有在 useEffect 中正确传递第二个参数。
就这样吧
useEffect(() => {
if (isNew) {
fetch(url, {
method: 'Post',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(body)
}).then(response => response.json())
.then(apiData => {
setState({ apiData });
}).catch(error =>
console.error('Error:', error)
setError(error); // Save your error inside the catch block
);
// return error; <-- Do not return anything that isn't used for useEffect cleanup! Use return only for cleanup, like unsubscribing API.
}
}, [isNew]); <--- This will ensure that everytime isNew changes, it will run the useEffect again.
但是您可能想更改对其他变量的依赖关系,因为 isNew 是一个 bool 值,因此我认为如果在下一次调用时再次传递 true ,它可能不起作用。
您可以使用该 URL 作为 useEffect 的依赖项,以便在每个新 URL 上,它将在 useEffect 中运行调用。
关于javascript - 用于获取数据的自定义 react Hook 在第二次点击时不会提供数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59540567/