React JS 调用函数，点击按钮时带有参数

Question

这就是问题，我在页面上有一个按钮，单击按钮时我会调用一个函数来从 REST API 获取数据。 这是代码：

import React from 'react';
//import Navigatore  from './componente_1.js';
import { Table } from 'react-bootstrap';
import base from './global.js';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import {  useEffect, useState } from 'react';
import moment from 'moment';
import {Button} from 'react-bootstrap';


const Appuntamenti  = () => {
  const [dati, setDati] = useState([]); 
 

  function useCaricamento (giorno)  {
    //Appuntamenti/getByData?data=2024-02-27
    useEffect(()=>{
      fetch(base+'Appuntamenti/getByData?data=' + giorno)
      .then((response)=> response.json())
      .then((datos) => {
        setDati(datos); 
      });
    });
  }
  var contenuto;
  if(dati.length === 0) {
    contenuto = <tr><td colSpan='5'>Dati non caricati</td></tr>;
  } else {
    contenuto = dati.map((elem) => {
      return(
        <tr>
          <td>{elem.cliente.cognome}</td>
          <td>{elem.cliente.nome}</td>
          <td>{elem.variante.nome}</td>
          <td width={120}>{moment(elem.data_ora_inizio).format("HH:mm")} - {moment(elem.data_ora_fine).format("HH:mm")}</td>
        </tr>
      );
    })
  }
  useCaricamento("2024-02-27");

  function Bottoni (props) {
    const {ricarica} = useCaricamento(props.data);
    return(
        <Button variant="primary" >{props.testo}</Button>
      
    );
  }
  
  
  
  return (
      
       
      <div  id='contenitore'>
       <Bottoni  data={moment().add(1, "day").format("YYYY-MM-DD")} testo="Domani"></Bottoni>
       <Bottoni  data={moment().format("YYYY-MM-DD")} testo="Oggi"></Bottoni>
        <Table  striped bordered hover size='sm' >
            <thead>
              <tr>
                <th>Cognome</th>
                <th>Nome</th>
                <th>Tratt.</th>
                <th>Ora</th>
              </tr>
            </thead>
            <tbody>
            {contenuto}
            </tbody>
          </Table>
        
      </div>
   
  );
}

export default Appuntamenti;

在此版本的代码中，我制作了一个自定义组件 (Bottoni)，它调用函数“useCaricamento”来获取数据。现在错误是

useCaricamento(...) is undefined

但即使我直接将调用链接到 onclick 事件，问题也会变为

React Hook "useCaricamento" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function  react-hooks/rules-of-hooks

我是 React 新手，我不明白我错了什么。

Answer 1

代码中的问题：

1. 在

   useEffect

   内滥用

   useCaricamento

   。
2. 从常规函数调用挂钩。

---

如何解决问题：

1. 将

   useCaricamento

   重构为常规函数。
2. 在Bottoni组件中使用onClick处理程序。

---

固定代码：

import React, { useState } from 'react';
import { Button, Table } from 'react-bootstrap';
import moment from 'moment';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import base from './global.js';

const Appuntamenti = () => {
  const [dati, setDati] = useState([]);

  // Async function for fetching data
  const caricamento = async (giorno) => {
    try {
      const response = await fetch(base + 'Appuntamenti/getByData?data=' + giorno);
      const datos = await response.json();
      setDati(datos);
    } catch (error) {
      console.error("Failed to fetch data:", error);
    }
  };

  // Function to render table rows
  const renderContent = () => {
    if (dati.length === 0) {
      return <tr><td colSpan='5'>Dati non caricati</td></tr>;
    } else {
      return dati.map((elem, index) => (
        <tr key={index}> {/* Use a more unique key if available */}
          <td>{elem.cliente.cognome}</td>
          <td>{elem.cliente.nome}</td>
          <td>{elem.variante.nome}</td>
          <td width={120}>{moment(elem.data_ora_inizio).format("HH:mm")} - {moment(elem.data_ora_fine).format("HH:mm")}</td>
        </tr>
      ));
    }
  };

  // Button component with click handler
  const Bottoni = ({ data, testo }) => {
    return (
      <Button variant="primary" onClick={() => caricamento(data)}>
        {testo}
      </Button>
    );
  };

  return (
    <div id='contenitore'>
      <Bottoni data={moment().add(1, "days").format("YYYY-MM-DD")} testo="Domani" />
      <Bottoni data={moment().format("YYYY-MM-DD")} testo="Oggi" />
      <Table striped bordered hover size='sm'>
        <thead>
          <tr>
            <th>Cognome</th>
            <th>Nome</th>
            <th>Tratt.</th>
            <th>Ora</th>
          </tr>
        </thead>
        <tbody>
          {renderContent()}
        </tbody>
      </Table>
    </div>
  );
}

export default Appuntamenti;