使用反应钩子在浏览器中显示数据答案

【问题标题】：using react hooks displaying data in the browser使用反应钩子在浏览器中显示数据
【发布时间】：2020-02-09 23:22:55
【问题描述】：

我正在尝试在函数内部实现 api 调用。
这样我就可以在页面加载时直接在函数内部传递数据。
我是反应钩子的新手。
当我包含钩子时出现此错误 '无效的钩子调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一：'
基本上我想在 createData 方法中传递数据
你能告诉我如何解决它吗？
在下面提供我的代码 sn-p 和沙箱。

https://codesandbox.io/s/material-demo-o8wb4

demo.js

function createData(name, calories, fat, carbs, protein) {
  const channel = useSelector(state => state);

  console.log("before useEffect channel---->", channel);
  console.log("before useEffect channel.json---->", channel.json);

  const dispatch = useDispatch();

  const getPosts = channel => dispatch(fetchPosts(channel));

  return { name, calories, fat, carbs, protein };
}

【问题讨论】：

标签： javascript html reactjs api redux

【解决方案1】：

您在函数组件之外调用createData。快速解决方法是移动

  const initialRows = [
    createData("Cupcake", 305, 3.7, 67, 4.3),
    createData("Donut", 452, 25.0, 51, 4.9),
    createData("Eclair", 262, 16.0, 24, 6.0),
    createData("Frozen yoghurt", 159, 6.0, 24, 4.0),
    createData("Gingerbread", 356, 16.0, 49, 3.9),
    createData("Honeycomb", 408, 3.2, 87, 6.5),
    createData("Ice cream sandwich", 237, 9.0, 37, 4.3),
    createData("Jelly Bean", 375, 0.0, 94, 0.0),
    createData("KitKat", 518, 26.0, 65, 7.0),
    createData("Lollipop", 392, 0.2, 98, 0.0),
    createData("Marshmallow", 318, 0, 81, 2.0),
    createData("Nougat", 360, 19.0, 9, 37.0),
    createData("Oreo", 437, 18.0, 63, 4.0)
  ];

在EnhancedTable()内

【讨论】：