在 React 中使用效果钩子设置钩子状态

Question

我正在尝试为我的一门课程中的 React 作业创建自定义数据获取钩子。Is是一个简单的钩子，用于访问几个REST API端点并创建一个清单对象，该应用程序将其用于萨拉德组合组件。问题是我似乎无法从获取数据的useEffect钩子中设置钩子的内部状态。我以前多次使用这种方法，但我真的不知道是什么导致了这种行为。无论我尝试在useEffect函数中使用setContent，它始终保持null。

请帮忙！

const useInventory = (baseURL) => {
const [loading, setLoading] = useState(false);
const [content, setContent] = useState(null);
const [error, setError] = useState(null);
useEffect(() => {
setLoading(true);
const types = ['foundations', 'extras', 'proteins', 'dressings'];
const urls = types.map(endp => `${baseURL}/${endp}`);
Promise
.all(urls.map(u => fetch(u)))
.then(responses => Promise.all(responses.map(res => res.json())))
.then(data => {
const inventory = data.reduce((acc, curr, i) => 
({ ...acc, [types[i]]: curr }),
{});
// This logs the inventory in desired format
// e.g { foundations: Array, extras: Array, ... }
console.log(inventory);
setContent(inventory);
})
.catch(err => {
setError(err);
})
.finally(() => {
setLoading(false);
// This logs null, for some reason
console.log(content);
});
}, [baseURL]);
return [content, loading, error];
}

Answer 1

设置状态不同步，您将无法在 finally 块中获得更新的内容。

如果要调试内容更改的值，可以使用useEffect和控制台，如下所示。

useEffect(() => {
console.log(content); 
}, [content])

Answer 2

试试这个，它就会通过

const useInventory = baseURL => {
const [loading, setLoading] = useState(false);
const [content, setContent] = useState(null);
const [error, setError] = useState(null);
useEffect(() => {
setLoading(true);
const types = ["foundations", "extras", "proteins", "dressings"];
const urls = types.map(endp => `${baseURL}/${endp}`);
function getData() {
Promise.all(urls.map(u => fetch(u)))
.then(responses => Promise.all(responses.map(res => res.json())))
.then(data => {
const inventory = data.reduce(
(acc, curr, i) => ({ ...acc, [types[i]]: curr }),
{}
);
// This logs the inventory in desired format
// e.g { foundations: Array, extras: Array, ... }
console.log(inventory);
setContent(inventory);
})
.catch(err => {
setError(err);
});
}
getData();
}, [baseURL, content]);
console.log(content);
return [content, loading, error];
};
`