父组件状态更新后SelectedItem子组件未重新渲染问题求助

嗨，我瞅了你的代码，一下子就发现问题所在啦！

你的SelectedItem组件里犯了一个很常见的小错误：你把父组件传过来的CurrentSelectedItem存在了自己的本地useState里，但useState的初始值只会在组件第一次挂载的时候生效一次。之后父组件的selectItem状态更新，虽然CurrentSelectedItem props已经变了，但你的本地item state并不会自动跟着更新，所以组件自然不会重新渲染展示新选中的内容。

给你两种解决办法，按需选就行：

方案一：直接使用props（推荐，最简洁） #

如果你的SelectedItem组件不需要对选中项做本地修改，完全没必要用本地state，直接用父组件传过来的props就行：

import QuantityBar from "./QuantityBar";
import "./SelectedImage.css"

function SelectedItem({CurrentSelectedItem}) {
  return (
    <div className="selected-item">
      {/* <img src={CurrentSelectedItem.image} className="selected-image" /> */}
      {CurrentSelectedItem.name}
      {/* <QuantityBar itemCount={0} /> */}
    </div>
  );
}

export default SelectedItem;

方案二：用useEffect监听props变化（如果需要本地state的场景） #

要是你之后需要在SelectedItem里对选中项做本地修改（比如修改数量之类的），那可以保留本地state，但要加个useEffect来监听props的变化，及时更新本地state：

import QuantityBar from "./QuantityBar";
import "./SelectedImage.css"
import { useState, useEffect } from "react";

function SelectedItem({CurrentSelectedItem}) {
  let [item, setItem] = useState(CurrentSelectedItem);  

  // 当传入的CurrentSelectedItem变化时，更新本地的item state
  useEffect(() => {
    setItem(CurrentSelectedItem);
  }, [CurrentSelectedItem]);

  return (
    <div className="selected-item">
      {/* <img src={item.image} className="selected-image" /> */}
      {item.name}
      {/* <QuantityBar itemCount={0} /> */}
    </div>
  );
}

export default SelectedItem;

试一下上面的修改，应该就能正常渲染新选中的项啦！

备注：内容来源于stack exchange，提问作者Abel