RTK查询响应状态

Question

我正在尝试将一些Axio代码转换为RTK查询，并且遇到了一些问题。来自RTK查询的“数据”响应似乎不像我想的那样像useState。

原始axio代码：

const [ importantData, setImportantData ] = useState('');
useEffect(() => {
    async function axiosCallToFetchData() {
        const response = await axiosAPI.post('/endpoint', { payload });
        const { importantData } = await response.data;
        setImportantData(importantData);
    }

    axiosCallToFetchData()
        .then((res) => res)
        .catch((error) => console.log(error));
}, []);

const objectThatNeedsData.data = importantData;

新的RTK查询代码

const { data, isSuccess } = useGetImportantDataQuery({ payload });
if(isSuccess){
    setImportantData(data.importantData);
}

const objectThatNeedsData.data = importantData;

然而，这给了我一个无限的呈现循环。此外，如果我试图将'data‘对象作为一个状态对象，并将其抛到我的组件中：

const objectThatNeedsData.data = data.importantData;

然后我得到一个未定义的错误，因为它试图在importantData完成之前加载它。我觉得这应该是个简单的解决办法，但我被困住了。我已经看过了这些文档，但是大多数示例只是使用if语句块来检查状态。API调用至少是使用RTK进行的，并且得到了正确的响应。有什么建议吗？

Answer 1

第一个问题是，在呈现过程中总是调用setImportantData，而不检查是否有必要--这总是会导致重发。如果您想这样做，您需要检查它是否有必要：

if(isSuccess && importantData != data.importantData){
    setImportantData(data.importantData);
}

但是正如您注意到的，这实际上是不必要的-当您已经可以在组件中访问它时，几乎不需要将内容复制到本地状态。

但是，如果访问data.importantData，首先需要检查data是否存在--您忘了在这里检查isSuccess。

if (isSuccess) {
  objectThatNeedsData.data = data.importantData;
}

尽管如此，如果objectThatNeedsData不是您在呈现期间声明的新局部变量，那么您可能不应该仅仅在呈现过程中修改它。