在我的NextJs应用中，我也遇到了同样的问题。在我的例子中，我认为这是与缓存相关的问题。删除"后运行项目。“Next”文件夹修复了问题。我希望删除React中的构建文件夹也能起到同样的作用。

React linter假定每个方法都以使用钩子开始，并且钩子不能在类中工作。通过将const usstyles重命名为任何不以use开头的东西，比如const myStyles，就可以了。

更新:

makestyle是钩子api，你不能在类中使用它。你可以使用样式组件API。在这里看到的

在我的例子中，我在FlatList的renderItem道具中传递组件名称，而不是函数。它在早期工作，因为我的组件是一个功能组件，但当我添加钩子时，它失败了。

之前:

    <FlatList
        data={memberList}
        renderItem={<MemberItem/>}
        keyExtractor={member => member.name.split(' ').join('')}
        ListEmptyComponent={
          <Text style={{textAlign: 'center', padding: 30}}>
            No Data: Click above button to fetch data
          </Text>
        }
      />

后:

    <FlatList
        data={memberList}
        renderItem={({item, index}) => <MemberItem item={item} key={index} />}
        keyExtractor={member => member.name.split(' ').join('')}
        ListEmptyComponent={
          <Text style={{textAlign: 'center', padding: 30}}>
            No Data: Click above button to fetch data
          </Text>
        }
      />

当我链接本地图书馆时，我得到了这个错误。下面的方法解决了我的问题。

在图书馆:

从依赖中删除“react”和“react-dom”，并将它们添加到peerDependencies中。 安装依赖项，构建

重新启动主项目。

你只能从React函数中调用钩子。点击这里阅读更多。

只需将Allowance类组件转换为功能组件。

Working CodeSandbox演示。

const Allowance = () => {
  const [allowances, setAllowances] = useState([]);

  useEffect(() => {
    fetch("http://127.0.0.1:8000/allowances")
      .then(data => {
        return data.json();
      })
      .then(data => {
        setAllowances(data);
      })
      .catch(err => {
        console.log(123123);
      });
  }, []);

  const classes = useStyles();
  return ( <
    Paper className = {
      classes.root
    } >
    <
    Table className = {
      classes.table
    } >
    <
    TableHead >
    <
    TableRow >
    <
    TableCell > Allow ID < /TableCell> <
    TableCell align = "right" > Description < /TableCell> <
    TableCell align = "right" > Allow Amount < /TableCell> <
    TableCell align = "right" > AllowType < /TableCell> <
    /TableRow> <
    /TableHead> <
    TableBody > {
      allowances.map(row => ( <
        TableRow key = {
          row.id
        } >
        <
        TableCell component = "th"
        scope = "row" > {
          row.AllowID
        } <
        /TableCell> <
        TableCell align = "right" > {
          row.AllowDesc
        } < /TableCell> <
        TableCell align = "right" > {
          row.AllowAmt
        } < /TableCell> <
        TableCell align = "right" > {
          row.AllowType
        } < /TableCell> <
        /TableRow>
      ))
    } <
    /TableBody> <
    /Table> <
    /Paper>
  );
};

export default Allowance;

当我使用npm link安装我的本地库时，我遇到了这个问题，我使用cra构建了本地库。我在这里找到了答案。字面意思是:

当你使用npm link或类似的工具时，这个问题也会出现。 在这种情况下，您的捆绑器可能“看到”两个react -一个在应用程序中 文件夹和图书馆文件夹里的一个。假设'myapp'和'mylib' 是兄弟文件夹，一个可能的解决办法是运行'npm link . ./myapp/node_modules/react这应该使 库使用应用程序的React副本。

因此，运行命令:npm link <path_to_local_library>/node_modules/react，例如。在我的情况下NPM链接..项目目录下的/libraries/core/decipher/node_modules/react修复了这个问题。