Javascript 获取数据的自定义react钩子在第二次命中时不提供数据

我有一个下面的自定义

useffect

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

事件之后使用上面的钩子，如下所示

let dt = {};
const [inputParam, setInputParam] = useState({
    FirstName: 'Tom',
    LastName : 'Harris'
});

const handleInputChanges = (params) =>{
    setInputParam(params);
};

dt = useGetData (url, inputParam, true);

---

使用上面的代码，我可以点击

useGetData

自定义钩子，但是钩子没有调用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. 

useffect（（）=>{
如果（是新的）{
获取（url{
方法：“Post”，
标题：{
“内容类型”：“应用程序/json”
},
body:JSON.stringify（body）
}).then（response=>response.json（））
。然后（apiData=>{
setState（{apiData}）；
}).catch（错误=>
console.error（'error:'，error）
setError（error）；//将错误保存在catch块中
);
//返回错误；未在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. 

useffect（（）=>{
如果（是新的）{
获取（url{
方法：“Post”，
标题：{
“内容类型”：“应用程序/json”
},
body:JSON.stringify（body）
}).then（response=>response.json（））
。然后（apiData=>{
setState（{apiData}）；
}).catch（错误=>
console.error（'error:'，error）
setError（error）；//将错误保存在catch块中
);
//返回错误；您正在useEffect的第二个参数中使用空数组。当道具更改时，此参数不会更新。这类似于componentDidMount。
您需要传递像[url，body，isNew]这样的道具，或者根本不传递useEffect中的第二个参数

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;
    }
}, [url, body, isNew]);
return state;
}

您正在useEffect的第二个参数中使用空数组。当道具更改时，此参数不会更新。这类似于componentDidMount。
您需要传递像[url，body，isNew]这样的道具，或者根本不传递useEffect中的第二个参数

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;
    }
}, [url, body, isNew]);
return state;
}

如果要运行效果并只清理一次（装载和卸载时），可以将空数组（[]）作为第二个参数传递。这告诉React，效果不依赖于道具或状态的任何值，因此它永远不需要重新运行。因此，只需检查是否需要传递空数组。@Mukund i passed
（[]）
，请查看我的代码isNew在自定义挂钩中的用法是什么？如果isNew为true，是否只想发出post请求？抱歉，我的意思是，如果要重新运行，则不需要传递数组。因此，请将其删除。如果要运行效果并仅清理一次（装载和卸载时），则可以传递空数组（[]）作为第二个参数。这告诉React，您的效果不依赖于道具或状态的任何值，因此它永远不需要重新运行。因此，只需检查是否需要传递空数组。@Mukund i passed
（[]）
，请查看我的代码在自定义钩子中isNew的用法是什么？如果isNew为真，您是否只想发出post请求？抱歉，我的意思是，如果您想重新运行，您将不需要传递数组。因此请删除它。我需要添加
正文
作为依赖项，因为这将从事件中得到更改。但是添加它会给我
 未捕获的TypeError:destroy不是commitHookEffectList中的函数（react dom.development.js:22012）
error..什么是错误以及为什么会出现错误coming@Lara您正在useEffect钩子内返回某些内容。useEffect中的Return用于清理，它必须是一个函数。但您返回的是错误，这导致它抛出类似的错误。我清理了上面的答案以供参考。我需要添加
主体
作为依赖项因为这就是事件将要更改的内容。但是添加它会给我
uncaughttypeerror:destroy不是commitHookEffectList的函数（react dom.development.js:22012）
error..什么是错误以及为什么会出现错误coming@Lara您正在useEffect钩子中返回某些内容。useEffect中的Return用于清理，它必须是一个函数。但您返回的是错误，这导致它抛出类似的错误。我清理了上面的答案以供参考。