Попытка изменить состояние в родительском компоненте React Hooks из дочернего компонента - PullRequest
Новая
       2

Попытка изменить состояние в родительском компоненте React Hooks из дочернего компонента

1 голос
/ 21 июня 2020

Я просматривал связанные сообщения и пробовал несколько решений, но не смог адаптировать ни одно из них к моей ситуации. Я пытаюсь изменить состояние 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.

Ответы [ 2 ]

1 голос
/ 21 июня 2020

Я думаю, вы должны передать их оба как именованные реквизиты:

export default function PopupInfo({ selectedPin, handleClose })

или сделать так:

export default function PopupInfo(props), а затем использовать props.selectedPin и props.handleClose.

0 голосов
/ 21 июня 2020

Это не будет работать, поскольку React - это Однонаправленная модель потока данных - это основная особенность React.

Состояние родителя не может может быть изменен ребенком. Вы должны придумать идею для обработки данных в самом Parent или передать это как опору для обхода (не рекомендуется)

Если вам интересно узнать больше: https://www.youtube.com/watch?v=hO8u07-WTOk

...