Question

我陷入了一个烦人的问题：我从rest服务（我同时使用了类和函数）获取数据，并且如果我从根应用程序调用函数，则可以正常工作。因此，我尝试通过另一个组件内的按钮（onClick）调用我的函数...我得到了：

“错误：无效的钩子调用。只能在函数组件的主体内部调用钩子。这可能是由于以下原因之一导致的……”

我浏览了论坛...很多有类似问题但没有解决方案的人你能帮我吗？

import axios from "axios";

import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
import ModifyItem from './modifyItem';

export default function Pippo(props) {

const [isLoading, setLoading] = useState(true);
const [tableData, setTableData] = useState();

console.log(props);

  useEffect(() => {
    const table="table="+props.table;
    axios.post('http://localhost:3001/getTable',table).then(response => {
      setTableData(response.data);
      setLoading(false);
      console.log(props);
      console.log(tableData);
    });
  }, []);

  if (isLoading) {
    return <div className="testa" > Loading... </div>;
  }

  return (
    <div className="testa" >
      <TableContainer component={Paper}>
          <Table size="small" aria-label="a dense table">
          <TableHead>
              <TableRow>
              {tableData.fields.map((f, idx)=>{return (<TableCell key={idx}>{f.COLUMN_NAME}</TableCell>);})}
              </TableRow>
          </TableHead>
          <TableBody>
              {tableData.data.map((r, ridx)=>{
                  let re = Object.values(r);
                  return (
                      <TableRow key={ridx} onClick={()=>ModifyItem(re)}>
                      { re.map((d, didx)=>{return(<TableCell key={didx}>{d}</TableCell>)}) }
                      </TableRow>
                  );
              })}
          </TableBody>
          </Table>
      </TableContainer>
    </div>
  );
}```


The error is reported on the useState call:

    >   12 |
      13 | export default function Pippo(props) {
      14 |
    > 15 | const [isLoading, setLoading] = useState(true);
      16 | const [tableData, setTableData] = useState();
      17 |
      18 | console.log(props);

and here the piece of code making the call:


return (
        <List>
        { tables.map((e)=>(
            <ListItem button key={e} onClick={()=>{Pippo({'table': e})}} >
                <ListItemIcon>
                    <TableChartIcon size="large" />
                </ListItemIcon>
                <ListItemText primary={e.replace(/_/g," ")} />
            </ListItem>
            ))
        }
        </List>
    );

Answer 1

您已将Pippo声明为函数组件。 只能在函数组件的主体内部调用挂钩。 因此，您不应像普通函数那样调用函数组件。

示例，您可以为表使用状态：

const [table, setTable] = useState(null);

return (
    <List>
        { tables.map((e)=>(
            <ListItem button key={e} onClick={()=>{setTable(e)}} >
                <ListItemIcon>
                    <TableChartIcon size="large" />
                </ListItemIcon>
                <ListItemText primary={e.replace(/_/g," ")} />
            </ListItem>
        ))
        }
        
        {/*render Pippo here as exmaple how to call a function component*/}
        {table && <Pippo table={table}}
    </List>
);

React JS和Axios的无效钩子调用错误

1 个答案: