如何在更新了两个变量的状态后才执行一个函数?

Question

我是新的React，我目前正试图找出一种方法来调用一个函数后，只有两个状态变量已更新。这些状态变量在我的后端运行fetch后更新，但是我试图调用的函数一直返回错误，因为它在变量设置之前被调用。我一直在尝试使用效果和异步，但我觉得我错过了一些东西。我想调用calculateRec"在使用fetch的数据设置coinbasePrices和binancePrices之后。任何帮助将非常感激!

const [coinbasePrices, setCoinbasePrices] = useState([]);
const [binancePrices, setBinancePrices] = useState([]);
const [recommendations, setRecommendations] = useState({});
useEffect(() => {
(async () => {
await fetch('http://localhost:8080/prices/coinbase').then(res => res.json())
.then((data) => {
setCoinbasePrices(reformatPrices(data))
})
.catch(err => { throw err });
await fetch('http://localhost:8080/prices/binance').then(res => res.json())
.then((data) => {
setBinancePrices(reformatPrices(data))
})
.catch(err => { throw err });
setRecommendations(calculateRec(coinbasePrices, binancePrices));
})();
}, []);

Answer 1

使用一个独立的useEffect和依赖数组作为前两个状态值。

更新:基于建议(谢谢)更新使用swapi的工作示例。

const Component = () => {
const [people, setPeople] = React.useState({});
const [planets, setPlanets] = React.useState({});
const [data, setData] = React.useState({});
React.useEffect(() => {
fetch("https://swapi.dev/api/people/1/")
.then(res => res.json())
.then(setPeople)
fetch("https://swapi.dev/api/planets/1/")
.then((res) => res.json())
.then(setPlanets)

}, []);
React.useEffect(() => {
if (people && planets) {
setData({ person: people.name, planet: planets.name});
}
}, [people, planets]);

return <div>{JSON.stringify(data)}</div>
}
ReactDOM.render(<Component />, document.getElementById("app"));

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="app"></div>

Answer 2

我认为你有很多问题。首先，决定你是使用承诺还是async await组合。然后确保钩子的定义正确。我将使用一个async钩子每次取，然后一个单一的useEffect来计算最终值。

这将是使用fetch钩子:

const useFetch = (url, formatter) => {
const [loading, setLoading] = useState(false);
const [result, setResult] = useState(null);
const [error, setError] = useState(null);
const execute = async () => {
setLoading(true);
setResult(null);
setError(null);
try {
const response = await fetch(url);
const data = response.json();
const result = formatter ? formatter(data) : data;
setResult(result);
setLoading(false);
} catch (error) {
setError(error);
setLoading(false);
}
});

useEffect(() => {
execute();
}, [execute]);
return { loading, result, error };
};

，基于此，这将是你的基本逻辑:

const YourFunctionalComponent = () => {
const [recommendations, setRecommendations] = useState({});
const { result: coinbasePrices } = useFetch('http://localhost:8080/prices/coinbase', reformatPrices);
const { result: binancePrices } = useFetch('http://localhost:8080/prices/binance', reformatPrices);
useEffect(() => {
if (coinbasePrices && binancePrices) setRecommendations(calculateRec(coinbasePrices, binancePrices));
}, [coinbasePrices, binancePrices]);
return (
// use your recommendations as you wish...
);
};

有了这个，你可以使用单独的获取错误，你希望与加载以及显示加载指示器，如果你愿意。