试图从子组件 React Hooks 更改父级中的状态

Question

我一直在查看相关帖子并尝试了一些解决方案，但我无法根据我的情况调整其中任何一个。 我正在尝试通过发送函数并从子组件调用它来更改selectedPin 的状态。

见下面我的代码

父组件：

export default function Pins(data) {
const chargers = data.data;
const [selectedPin, setSelectedPin] = useState(null);

const handleClose = () => {
setSelectedPin(null);
};

return (
<>
  {chargers.map((charger, index) => (
    <Marker
      key={index}
      longitude={charger.AddressInfo.Longitude}
      latitude={charger.AddressInfo.Latitude}
    >
      <Button
        onClick={(e) => {
          e.preventDefault();
          setSelectedPin(charger);
        }}
      >
        <img src="./assets/pin.svg" alt="marker pin" />
      </Button>
    </Marker>
  ))}
  {selectedPin ? (
    <PopupInfo selectedPin={selectedPin} handleClose={handleClose} />
  ) : null}
 </>
 );
}

子组件：

export default function PopupInfo(selectedPin, { handleClose }) {
const pin = selectedPin.selectedPin;
console.log(pin);
console.log(handleClose);

return (
<Popup
  latitude={pin.AddressInfo.Latitude}
  longitude={pin.AddressInfo.Longitude}
  onClose={handleClose}
  >
    <div>Popup Info</div>
  </Popup>
  );
}

当控制台在子组件中记录handleClose 时，我得到undefined。

Answer 1

我认为您应该将它们都作为命名道具传递：

export default function PopupInfo({ selectedPin, handleClose })

或者这样做：

export default function PopupInfo(props) 然后使用props.selectedPin 和props.handleClose。

Answer 2

React 是单向数据流模型，它是 React 的核心特性。

子级不能修改父级的状态。您必须想出一个想法来处理 Parent 本身中的数据或将其作为道具传递给绕过（不推荐）

如果您有兴趣了解更多：https://www.youtube.com/watch?v=hO8u07-WTOk