Question

为什么会得到无法读取未定义属性的错误？

2022-06-12

581

javascript reactjs event-handling frontend getelementbyid

我有一个 React 应用，我应该从 API 端点 <reqres.in> 获取用户。

我应该在主页上返回与从 API 获取用户时获得的用户数量相同的按钮。

此外，我被限制不向所有按钮添加事件侦听器，而只向按钮的包装器添加一个侦听器。相同的代码是：

const ButtonContainer = ({ users }) => {
    // const navigate=useNavigate();
    const wrapper = document.getElementById('wrapper');
    wrapper.addEventListener('click', (event) => {
        const isButton = event.target.nodeName === 'BUTTON';
        if (!isButton) {
            return;
        }
        // navigate(`/singleuser/${event.target.id}`);
    })

    return (
        <div id='wrapper'>
            {
                users.map((user, idx) => {
                    return (
                        <button key={idx} id={idx}>
                            User {idx}
                        </button>
                    )
                })
            }
        </div>
    )
}

export default ButtonContainer

用户是我从 API 获取的用户数组。

但是我收到错误：

Cannot read properties of null (reading 'addEventListener')

我该怎么办？

Answer 1

使用 React 的原生 DOM 方法不会给你想要的结果，因为 React 有自己的 DOM 管理方式。

将 onClick 添加到你的包装器元素：

<div onClick={handleClick}>

然后让 handleClick 处理该事件。

function Example({ users }) {

  function handleClick(e) {

    // Because we're using event delegation [1]
    // check if the clicked element was a user button
    if (e.target.matches('button.user')) {

      // Extract the id from its dataset,
      // and log it
      const { id } = e.target.dataset;
      console.log(`User: ${id}`);
    }
  }

  return (
    <div onClick={handleClick}>
      {users.map(user => {
        return (
          <button
            key={user.id}
            className="user"
            data-id={user.id}
          >User: {user.id}
          </button>
        );
      })}
    </div>
  );

}

const users = [{ id: 1 }, { id: 2 }, { id: 3 }];

ReactDOM.render(
  <Example users={users} />,
  document.getElementById('react')
);

<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="react"></div>