时间戳

首页 > 解决方案 > 反应 onClick 事件触发一次点击太晚了

javascript - 反应 onClick 事件触发一次点击太晚了

问题描述

我设置了一个组件来显示所有拥有帐户的玩家的照片。然后使用 onClick 事件处理程序在父组件中呈现该组件。问题是 onClick 事件触发一次单击为时已晚。因此，在第一次点击时，状态不会发生任何变化，只有当我再次点击同一个播放器时，状态才会发生变化。如果我点击下一个玩家，状态将仍然记录前一个玩家。下面是我负责该组件的代码片段。

下面是组件的设置。

const PlayerPhotos = ({ profiles, onClick }) => {
  return (
    <div className='playerPhotosRow'>
      <ul>
        {profiles.map((e) => (
          <li key={e.email}>
            <img src={e.photoURL} onClick={onClick} id={e.email}></img>
          </li>
        ))}
      </ul>
    </div>
  );
};`

const PlayerLoadChart = ({ profiles }) => {
  const [emailSelect, setEmailSelect] = useState('');

  const HandleClick = (e) => {
    setEmailSelect(e.target.id);
  };

  return (
    <div>{<PlayerPhotos profiles={profiles} onClick={HandleClick} />}</div>
  );
};

标签： javascriptreactjsreact-hooksevent-handlinguse-state

解决方案

我刚刚复制了您的代码并进行了一些改进。到目前为止没有任何问题。

const PlayerPhotos = ({profiles, onClick}) => {
  return (
    <div className='playerPhotosRow'>
      <ul>
        {profiles.map((profile) => (
          <li key={profile.email}>
            <img
              id={profile.email}
              src={profile.photoURL}
              onClick={onClick}
            />
          </li>
        ))}
      </ul>
    </div>
  );
};

const PlayerLoadChart = ({ profiles }) => {
  const [emailSelect, setEmailSelect] = React.useState('');

  const onClickHandler = React.useCallback((e) => {
    setEmailSelect(e.target.id);
  }, []);

  return (
    <div>
      <h1>{'Email: '}{emailSelect || 'none'}</h1>
      <PlayerPhotos profiles={profiles} onClick={onClickHandler} />
    </div>
  );
};

const App = () => {
  const profiles = [
    {
      email: 'user1@test.com',
      photoURL: 'https://via.placeholder.com/150.png?text=User+1'
    },
    {
      email: 'user2@test.com',
      photoURL: 'https://via.placeholder.com/150.png?text=User+2'
    },
    {
      email: 'user3@test.com',
      photoURL: 'https://via.placeholder.com/150.png?text=User+3'
    }
  ];
  
  return <PlayerLoadChart profiles={profiles} />;
};

ReactDOM.render(<App />, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>

<div id='app'></div>

推荐阅读