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

Question

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

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

任何建议为什么会发生以及如何优化以将数据从主（APP）传递到child2(basket)。

更新：2 我已经厌倦了用下面的链接模拟沙箱中的代码问题，非常感谢任何关于我在代码沙箱中的代码的建议（以使其更好），因为这是我第一次使用它

codesandbox

更新：1 我在 youtube 上做了一个小片段，只是为了了解我面临的问题 basketItems goes back to initial state

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>;
}

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