如何从子组件更新父组件的状态，子组件?

Question

(不好意思)

嗨，这段代码一半工作一半。我可以删除产品，但我必须去另一个页面，并返回，以呈现。我不知道为什么?

代码:父组件:

function ShoppingCard() {
const shoppingCard = useContext<any>(ShoppingCardContext);
const [shoppingCard2, setShoppingCard2] = useState<any>(shoppingCard);
useEffect(() => {
setShoppingCard2(shoppingCard);

}, [shoppingCard, shoppingCard2]);
const removeProduct = (shopCart: any) => {
let index = shoppingCard.findIndex(
(oneProduct: any) => oneProduct.idProduct === shopCart.idProduct
);
shoppingCard.splice(index, 1);
setShoppingCard2(shoppingCard);

};

//将这个函数传递给下一个组件通过下一个组件。

Parent component 1
child component 2
child Component 3

我在按钮中使用这个函数来删除元素。在控制台中，我看到shoppingCard和shoppingCard2被更新，但只在子3中更新。为了看到效果(渲染)，我必须切换到另一个页面，然后返回。在app中，我使用React-Router。

p。这是我的第一篇文章

Answer 1

Issue

当从shoppingCard2数组中删除时，您正在改变状态，然后从未创建新的数组引用，以便协调工作。换句话说，React不"看到"。shoppingCard2数组为new数组，这样它就不会触发渲染。当导航离开并返回页面时，您会看到这种变化。

const removeProduct = (shopCart: any) => {
let index = shoppingCard.findIndex(
(oneProduct: any) => oneProduct.idProduct === shopCart.idProduct
);
shoppingCard.splice(index, 1);  // <-- mutation!!
setShoppingCard2(shoppingCard); // <-- same array reference
};

<标题>

解决方案浅层复制shoppingCard2数组并移除元素。使用Array.prototype.filter来完成此操作。

的例子:

const removeProduct = (shopCart: any) => {
setShoppingCard2(shoppingCard => shoppingCard.filter(
(oneProduct: any) => oneProduct.idProduct !== shopCart.idProduct
));
};

建议一个改进是从ShoppingCardContext公开一个状态更新函数，这样它就可以维护状态不变，而不是将其卸载给消费者。真的没有理由"重复"。如有需要，请在当地说明购物卡状态。

Answer 2

最好是使用全局状态。你可以阅读更多关于

<<ul>

反应上下文/gh>

回来的

另一个状态管理器