Question

在react中单击按钮时，我想获取api数据。

我只是通过添加一个按钮而在语法上不断出错，有人可以帮忙吗？

我只是新来的人。

这是我的代码：

  const [trackings, setTrackings] = useState(null);

  const handleClick = () => {
    console.log('this is:', this);
  }

  const render = () => {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }

  useEffect(() => {
    if(!trackings) {
      getTrackings();
      getTrackingsAftership();
    }
  })

  const getTrackings = async () => {
    let res = await apiService.getAllTrackingFromMongo();
    setTrackings(res);
  }

  const getTrackingsAftership = async () => {
    let res = await apiService.getAllFromAftershipApi();
    setTrackings(res);
  }


  const renderTrackings = tracking => {

    return (

      <li key={tracking._id} className="list__item tracking">
        <h3 className="tracking__name">{tracking.tracking_number}</h3>
        <p className="tracking__description">{tracking.description}</p>

      </li>

    );
  };

  return (
    <div className="App">
      <ul className="list">
        {(trackings && trackings.length > 0) ? (
          trackings.map(tracking => renderTrackings(tracking))
        ) : (
          <p>No trackings numbers found</p>
        )}
      </ul>
    </div>
  );
}

请看看您是否可以纠正我做错的事情。

感谢您的想法或任何帮助。

Answer 1

您正在混合功能和基于类的组件。您无需在功能组件中使用this，只需将代码更改为此：

 const render = () => {
    return (
      <button onClick={handleClick}>
        Click me
      </button>
    );
  }

另外，最好将它做成一个单独的组件而不是渲染函数，其优点之一是可重用性：

const Button = ({handleClick}) => {
return (
      <button onClick={handleClick}>
        Click me
      </button>
    );
}

// usage

<Button handleClick={handleClick}/>

Answer 2

this

您不能在功能组件this中使用const render = () => { return <button onClick={handleClick}>Click me</button>; };关键字用于类，它是类的引用，而应使用

const handleClick = () => {
    //put your function here
    getTrackings() //or any other function
  };

如果您想通过ajax调用onclick，请这么做

{{1}}

React JS在保存点击按钮上调用获取API

2 个答案: