Реакция с крючками: как правильно обновить состояние после события клика? - PullRequest
Новая
       24

Реакция с крючками: как правильно обновить состояние после события клика?

0 голосов
/ 22 апреля 2019

В моем JSX я сопоставляю массив объектов (импортированных из локального файла JS) для отображения набора значков с ключом, идентификатором и тегом alt.

Я использую хуки дляустановить состояние в пустую строку.Я хочу использовать событие onClick (переданное компоненту HeroIcons ), чтобы заменить это состояние идентификатором значка, по которому щелкнули (этот идентификатор является строкой).Вот код: 

import React, { useState } from "react";
import HeroImages from "../images/HeroImages";
import HeroIcons from "../components/HeroIcons";
import HeroShowcase from "../components/HeroShowcase";

const Heroes = () => {
  const [hero, currentHero] = useState("");

  const setCurrentHero = e => {
    currentHero(e.target.id);
    console.log(hero);
  };

  return (
    <div className="row">
      <div className="col-heroes">
        <ul className="hero-list">
          {/* map function below */}
          {HeroImages.map(({ id, src, altTag }) => (
            <HeroIcons
              key={id}
              id={id}
              src={src}
              altTag={altTag}
              setCurrentHero={setCurrentHero}
            />
          ))}
        </ul>
      </div>
      <div className="col-showcase">
        <HeroShowcase />
      </div>
    </div>
  );
};

export default Heroes;

Внутри компонента heroIcons: 

import React from "react";

const HeroIcons = props => {
  return (
    <li key={props.id} id={props.id} onClick={props.setCurrentHero}>
      <img src={props.src} alt={props.altTag} />
    </li>
  );
};

export default HeroIcons;

При нажатии на значок (созданный функцией карты) идентификатор не регистрируется на консоли.Однако, когда я яростно щелкаю по нему много раз, иногда идентификатор регистрируется.Это дает мне подсказку, что это событие щелчка может вызывать перезапуск функции карты и препятствовать нормальному журналу консоли enter image description here

Как я мог решить эту проблему?

Ответы [ 2 ]

0 голосов
/ 22 апреля 2019

Это потому, что вы hero не обновляются во время консоли, поэтому вам нужно использовать useEffect ловушку, когда это значение обновляется 

const setCurrentHero = e => {
  currentHero(e.target.id);
  console.log(hero);
};

useEffect(() => {
  console.log('Hero', hero);
}, [hero]);
0 голосов
/ 22 апреля 2019

Сначала вы должны использовать e.currentTarget.id вместо e.target.id, чтобы получить id текущего изображения.

  const setCurrentHero = e => {
    currentHero(e.currentTarget.id);
    console.log(hero);
  };

Секунда useState Крюку необходимо, чтобы вы обработали обратный вызов для использования log значения текущего состояния, пока он не принимает callback как setState.Вы можете использовать useEffect, но было бы лучше, если бы вы использовали значение e.currentTarget.id;

...