javascript - 为什么 onMouseOver 不能正常工作 Reactjs

Question

有这样一个任务

将鼠标悬停在选定的月份上时，显示本月出生的人员列表。已经在没有 .bind 的情况下尝试过，但仍然有错误

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';
import './styles.css';
import classes from './components/Month/month.module.css'


function App() {
    // state = {
    //   users: false
    // }
    const [users, setUser] = useState(null);
    const usersVisible = false;

    const fetchData = async () => {
        const response = await axios.get(
            'https:api/task0/users'
        );

        setUser(response.data);
    };

    const groupedUsers = users && users.reduce((acc, n) => {


        acc[new Date(n.dob).getMonth()].users.push(n);
        return acc;

    }, [...Array(12)].map((n, i) => ({
        month: new Date(0, i).toLocaleString('ru-RU', { month: 'long' }),
        users: []



    }))
    );

    const onHover = () => {
        return usersVisible = true;
    }
    console.log(usersVisible);
    return (
        <div className="App">
            <h1>Users list</h1>


            {/* Fetch data from API */}
            <div>
                <button className="fetch-button" onClick={fetchData}>
                    download users
        </button>
                <br />
            </div>

            {/* Display data from API */}
            {}
            <div className="users">
                {groupedUsers && groupedUsers.map(n => (
                    <div id="months" key={n.month} className={n.users > 0 ? classes.month.grey : n.users > 2 ?
                        classes.blue : n.users > 6 ? classes.green : classes.red} onMouseOver={(event) => this.onHover.bind(event)}>
                        <h2>{n.month}</h2>
                        {n.users.map(user => (
                            usersVisible ?

                                <div key={user.id} >

                                    <div>
                                        <h4 className={classes.userId}>user #{user.id}</h4>
                                        данные пользователя...</div>
                                </div> : null
                        ))}
                    </div>
                ))}
            </div>

        </div>
    );
}

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);

这是错误代码

TypeError: Cannot read property 'onHover' of undefined
onMouseOver
C:/Users/Константин/Desktop/react/new-app/src/index.js:60
  57 |     <div className="users">
  58 |      {groupedUsers && groupedUsers.map(n => (
  59 | <div id="months" key={n.month}  className={n.users > 0 ? classes.month.grey  : n.users > 2 ? 
> 60 |       classes.blue : n.users > 6 ? classes.green : classes.red} onMouseOver={(event) => this.onHover.bind(event)}>
     | ^  61 |   <h2>{n.month}</h2>
  62 |   {n.users.map(user => (
  63 |     usersVisible ? 

函数 onHover 改变了变量的值，这应该会导致 jsx 中 block 的输出。问题隐藏在哪里？非常感谢!!

Answer 1

错误来源:当您处理函数组件时，this 关键字不是对组件的引用，而是对窗口的引用。因此，为了访问您的 onHover，您只需直接调用它，而不是使用 this 或 bind。

此外，虽然此显示/隐藏与组件将具有的状态相关，但 usersVisible 应由状态处理。

function App() {
  const [users, setUser] = useState(null);
  const [usersVisible, setVisibility] = useState(false);

  const fetchData = async () => {
    const response = await axios.get(
      'https://yalantis-react-school.herokuapp.com/api/task0/users'
    );

    setUser(response.data);
  };

  const groupedUsers = users && users.reduce((acc, n) => {
    acc[new Date(n.dob).getMonth()].users.push(n);
    return acc;
  }, [...Array(12)].map((n, i) => ({
    month: new Date(0, i).toLocaleString('ru-RU', { month: 'long' }),
    users: []
  })));

  return (
    <div className="App">
      <h1>Users list</h1>

      {/* Fetch data from API */}
      <div>
        <button className="fetch-button" onClick={fetchData}>
          download users
        </button>
        <br />
      </div>

      {/* Display data from API */}
      {}
      <div className="users">
       {groupedUsers && groupedUsers.map(n => (
  <div id="months" key={n.month}  className={n.users > 0 ? classes.month.grey  : n.users > 2 ? 
        classes.blue : n.users > 6 ? classes.green : classes.red} 
onMouseLeave={() => setVisibility(false)}
onMouseOver={() => setVisibility(true)}>
    <h2>{n.month}</h2>
    {n.users.map(user => (
      usersVisible ? 

      <div key={user.id} >

        <div>
         <h4 className={classes.userId}>user #{user.id}</h4>
        данные пользователя...</div>
      </div> : null
    ))}
  </div>
))}
      </div>
    </div>
  );
}

最后，我注意到您正在为组件获取数据，因此请考虑使用 useEffect hook ，因为这是函数组件中推荐的数据获取方法