React组件在useEffect(使用了依赖数组)之后不会重新应答

Question

我在组件A中有一个对象状态priceRanges，我用一个键和一个值初始化它：

const [priceRanges, setPriceRanges] = useState({
[randomId]: {
"price": 0,
"quantity": 0
}
})

然后通过道具传递到组件B:

<ComponentB pricesRanges={pricesRanges} ...props />

问题是，在组件B中，我正在将这个对象转换为useEffect:上的数组

React.useEffect(() => {
const getArrayData = () => {
const keys = Object.keys(priceRanges)
keys.map(key => {
console.log(priceRanges[key]["price"])
priceRangesArray.push({
id: key,
price: priceRanges[key]["price"] ? priceRanges[key]["price"] : 0,
quantity: priceRanges[key]["quantity"] ? priceRanges[key]["quantity"] : 0
})
})
}
getArrayData()
}, [priceRanges])

但是组件在useEffect运行后不会重新发送。因此，组件不会呈现pricesRanges初始化时使用的初始状态。为了测试这一点，我做了这个：

{priceRangesArray.length > 0 ? 
(priceRangesArray.map(quantityAndPrice => {
return (
<div className="flex" key={quantityAndPrice.id}>
{console.log("I AM RENDERING")}
<input
...props
/>
<input
...props
/>
</div>
)
})) :<p>Hello</p>}

这总是在挂载时渲染Hello。我该如何应对？谢谢！

Answer 1

导致重新应答的唯一方法是设置状态。在useEffect期间更改数组不会导致重新应答。因此，您可以通过添加一个状态变量来解决此问题，然后在计算完数组后设置状态。

然而，我认为这不是正确的做法。您的数组是派生数据：它直接基于priceRanges中的内容，您不希望它偏离这一点。因此，为此，我将在渲染组件时计算行中的值：

const Example = ({ priceRanges }) => {
const keys = Object.keys(priceRanges);
const priceRangesArray = keys.map((key) => {
return {
id: key,
price: priceRanges[key]["price"] ? priceRanges[key]["price"] : 0,
quantity: priceRanges[key]["quantity"] ? priceRanges[key]["quantity"] : 0,
};
});
// ...rest of the component
}

如果性能是一个问题，则可以将其封装在useMemo中，以便在priceRanges没有更改的情况下跳过计算。

const Example = ({ priceRanges }) => {
const priceRangesArray = useMemo(() => {
const keys = Object.keys(priceRanges);
return keys.map((key) => {
return {
id: key,
price: priceRanges[key]["price"] ? priceRanges[key]["price"] : 0,
quantity: priceRanges[key]["quantity"] ? priceRanges[key]["quantity"] : 0,
};
});
}, [priceRanges]);
// ... rest of the component
};