當對象懸停在 React 中時替換框中的文本

Question

我有一些代碼我真的遇到了問題。 我有一個id為info-box的div ，我想替換其中一個對象懸停時的文本。

我嘗試在onMouseOver函數中使用setState執行此操作，但出現此錯誤：

'TypeError: Cannot read property 'SetState' of undefined'.

我一直在谷歌搜索並認為這可能與綁定某些東西有關，但我無法弄清楚。

這是我的代碼：

import React from "react";
import asteroid from './images/asteroid.png';
import earth from './images/earth.png';
import './App.css';

function compare( a, b ) {
  if ( a.average_lunar_distance < b.average_lunar_distance ){
    return -1;
  }
  if ( a.average_lunar_distance > b.average_lunar_distance ){
    return 1;
  }
  return 0;
}

function HoverObject(props){
  const [hovering, setHovering] = React.useState(false);

  const { item, id} = props;
  return (
    <div className="Object" id={id}>
        <strong>{item.fullname}</strong>
        {/* <li><a href={item.url_nasa_details}> NASA Center fo Near Earth Object Studies Link to Object </a></li> */}
        <div className="image">
          <img class='rotate'
            src={asteroid}
            height='35' 
            width='35'
            alt="picture of asteroid"
            onMouseOver={() => setHovering(true), this.SetState({
              objectinfo: document.getElementsByClassName('info-' + id)
            })}
            onMouseOut={() => setHovering(false)}
          />
        </div>
      {hovering && <div className={'info-' + id}>
      <ul>
        <i>
          <li>Average Lunar Distance: {item.average_lunar_distance} or {item.average_lunar_distance*384317+" km"}</li>
          <li>Sentry ID: {item.sentryId}</li>
          <li>Predicted to be nearest: {item.year_range_min + " - " + item.year_range_max}</li>
          <li>{item.potential_impacts} Possible Potential Impacts </li>
          <li>Impact Probability: {item.impact_probability}</li>
          <li>Absolute Magnitude: {item.absolute_magnitude}</li>
          <li>Estimated Diameter: {item.estimated_diameter}</li>
          <li>Last Observed: {item.last_obs}</li>
        </i>
      </ul>
        </div>}
    </div>
  );

}

export default class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      objects: [],
      objectinfo: 'test'
    };
  }
  async componentDidMount(){
    const url = "https://api.nasa.gov/neo/rest/v1/neo/sentry?is_active=true&page=0&size=30&api_key=XXX"
    const response = await fetch(url);
    const data = await response.json();
    var sentry_objects = data.sentry_objects;
    this.setState({
      objects: sentry_objects.sort(compare).slice(0,10)
    })
  }
  render() {
    return (
      <div className="App" class='circle-container'> 
        <div id='info-box'><p>{this.state.objectinfo}</p></div>
        <img id='earth' src={earth}/>
        {this.state.objects.map((obj, index) => (
          <HoverObject key={obj} item={obj} id={'object' + (index + 1)} />
        ))
        }
      </div>
    );

  }
}

Answer 1

函數組件不使用this.setState約定來更新或設置組件狀態。 如果你想編輯父組件的狀態，你應該為子組件提供一個函數 prop 如...

<HoverObject key={obj} item={obj} id={'object' + (index + 1)} onHover={info => this.setState({ objectInfo: info })} />

然后在函數組件內部，您可以編輯onMouseOver處理程序以利用作為道具提供的這個函數：

<img class='rotate'
  src={asteroid}
  height='35' 
  width='35'
  alt="picture of asteroid"
  onMouseOver={() => {
    setHovering(true)
    props.onHover(document.getElementsByClassName('info-' + id))
  }
  onMouseOut={() => setHovering(false)}
/>