反应 useState 错误，我做错了什么？答案

【问题标题】：React useState Error, what am I doing wrong?反应 useState 错误，我做错了什么？
【发布时间】：2020-12-17 01:56:04
【问题描述】：

我收到错误react.development.js:1501 Uncaught (in promise) Error: Invalid hook call. Hooks can only be called inside of the body of a function component.，我在函数组件的顶部使用它，我的 React 版本和 ReactDOM 版本都是 17.0.1。我只反应进口一次。我相信我遵守了所有的规则。当我搜索错误时，我不断得到 React 文档已经描述的所有建议和规则。但我还有另一个组件使用状态并且不会抛出此错误。这是我的代码。

const { useState } = React;

export default () => {
    const [list, setList] = useState([]);

    return (
        <datalist id="themes">{
            list.map((item, index) => {
                return <option value={item} key={index} />
            })
        }</datalist>
    );
}

在我的示例中，React 是一个全局变量，我通过 CDN 包含它。

【问题讨论】：

我认为 linter 可能会挂断匿名函数的默认导出。尝试先给它起个名字，const MyComponent = () => ...，然后导出它，export default MyComponent;。
相当确定draw是对的，你只能在react组件或钩子中使用钩子（以'use'开头的函数）。由于它根本没有名字，linter 没有意识到它实际上是一个组件，并认为它只是一个常规的 JS 函数，其中不允许使用钩子
我没有使用 linter，真正让我感动的是我有另一个组件几乎 100% 相同，并且不会出错。事实上，当我在此处复制并粘贴该代码以使其 100% 相同时，我仍然会收到错误，但仅在此组件上而不是在另一个组件上。
我将其更新为使用命名实函数（而不是箭头函数），但仍然显示此错误。
你能同时显示两个函数吗，一个会产生错误，一个不会？我看不出这段代码有什么问题。

标签： reactjs react-hooks

【解决方案1】：

一个组件工作和组件不工作之间的区别与组件本身无关。而是它是如何渲染的。如果我直接渲染它，它会给出这个错误。如果我只是将它包装在另一个不使用状态的组件中然后渲染它，它就可以正常工作。

FetchedDataList.jsx

const { useState } = React;

export default () => {
    const [list, setList] = useState([]);

    return (
        <datalist id="themes">{
            list.map((item, index) => {
                return <option value={item} key={index} />
            })
        }</datalist>
    );
}

Wrapper.jsx

import FetchedDataList from './FetchedDataList.js';

export default (props) => {
    return <FetchedDataList {...props} />
}

app.js

import Wrapper from './wrapper.jsx';

React.render(Wrapper, document.body);

这似乎工作得很好。所以显然你不允许直接渲染使用状态的组件？我在他们的文档中没有看到这一点。

【讨论】：

这是因为 render 直接调用函数 Wrapper - 你应该传递 React.render(<FetchedDataList />, document.body)
“直接渲染”是什么意思？您从未分享过如何渲染工作和非工作组件。我仍然认为将匿名函数视为一个函数而不是一个反应组件是反应。
ReactDOM.render(Component, document.body) 正在直接渲染并且不起作用，而渲染渲染我的组件的包装器组件正在工作。我正在导出未命名的函数并且它工作正常，所以我向你保证这不是问题，至少在 React 17 中是这样。

【解决方案2】：

命名你的反应功能组件。

const { useState } = React;
export default Mycomponent () => {
const [list, setList] = useState([]);

return (
    <datalist id="themes">{
        list.map((item, index) => {
            return <option value={item} key={index} />
        })
    }</datalist>
);

}

【讨论】：