使用react将数据从父级传递给子级.状态，但状态重置为初始状态

Question

我在将状态传递给子组件时遇到了一个问题，所以基本上我从child1(Home)获取客户信息并保存在父级state(App)中，这一切都很好。

然后我将更新后的state(basketItems)传递给child2(Basket)。但是，当我单击Basket按钮时，Basket页面在篮页面内的console.log(basketItems)中不会显示任何信息，chrome浏览器(控制台(看起来也已刷新。

任何关于为什么会发生这种情况以及如何优化以将数据从main(APP(传递到child2(basket)的建议。

更新：2我已经厌倦了用下面的链接模拟沙盒中的代码问题，非常感谢您对我在codesandbox中的代码提出任何建议(使其更好(，因为这是我第一次使用它

代码沙箱

更新：1我在youtube上制作了一个小片段，只是为了了解我面临的问题basketItems返回初始状态

Main (APP)___|
|_Child 1(Home)
|_Child 2 (Basket)

来自Parent main(App)组件的代码段

function App() {
const [basketItems, setBasketItems] = useState([]);
const addBasketitems = (product, quantity) => {
setBasketItems(prevItems => [...prevItems, { ...product, quantity }])
}
console.log(basketItems) // here i can see the updated basketItems having customer data as expected [{...}]
return (
<Router>
<div className="App">
<header className="header">
<Nav userinfo={userData} userstatus={siginalready} />
</header>
<Switch>
<Route path="/" exact render={(props) => (

<Home {...props} userData={userData} userstatus={siginalready}
addBasketitems={addBasketitems}
/>
)}
/>
<Route path="/basket" exact render={(props) =>
(<Basket {...props} basketItems={basketItems} />
)}
/>
</Switch>
</div>
</Router>

来自child(basket)的代码段

function Basket({basketItems}) {
console.log(basketItems) // here i only get the [] and not the cusotmer data from parent component
return (
<div>
{`${basketItems}`} // here output is blank
</div>
);
}
export default Basket;

来自child(Home)的代码段

一旦按下按钮，它就会将用户选择的详细信息传递给父

....
<Button name={producNumber} value={quantities[productName]} variant="primary"
onClick={() => {
addBasketitems(eachproduct, quantities[productName])
}}>
Add to Basket
</Button >

Answer 1

您的函数运行良好，addbasketItem中的输出没有更改的原因是在使用setState时需要一些时间来应用更改，如果您使用下面的代码，您可以看到结果。

useEffect(()=>{
console.log('basket:',basketItems)
},[basketItems])

你的Basket组件只渲染一次，所以用这个代码替换它，看看它是否有效：

function Basket({ basketItems }) {
const [items, setItems] = useState([]);
useEffect(() => {
setItems(basketItems);
}, [basketItems]);
return <div>{`${items}`}</div>;
}

但是对于在几个组件之间传递数据，我强烈建议您使用，前提是它要好得多。