為什么 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 中塊的輸出。 問題藏在哪里？ 多謝！！

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 ，因為它是在函數組件中獲取數據的推薦方法