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

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

Summary page + multiple full details pages

或执行以下操作：

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

Answer 2

由于React是单向数据流模型-它是React的核心功能。

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

如果您想了解更多信息：https://www.youtube.com/watch?v=hO8u07-WTOk

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

2 个答案: