React Hook "useState" 在函数 "setResults" 中调用，它既不是 React 函数组件，也不是自定义 React Hook 函数

Question

我正在尝试在作为反应钩子的功能组件中进行 API 调用，并根据结果重新呈现组件的内容。这是代码：

正在调用 API 的组件 -

function IntegrationDownshift() {
    render(
        <Paper square>
            {setResults(inputValue).map(
                (suggestion, index) =>
                    renderSuggestion({
                        suggestion,
                        index,
                        itemProps: getItemProps({
                            item:
                                suggestion.userFullName
                        }),
                        highlightedIndex,
                        selectedItem
                    })
            )}
        </Paper>
    );
}

这是setResults函数：

function setResults(textInput) {
    const [data, setData] = useState({ users: [] });
    searchUser(textInput).then(result => {
        useEffect(() => {
            searchUser(textInput).then(result => {
                setData(result.users);
            });
        }, []);
    });
}

我正在尝试获取状态数据并根据数据重新渲染我的组件。这searchUser是调用外部 API 的操作。

1. 该searchUser呼吁的行动，并成功地获取数据，但我不知道为什么状态得到更新-我得到了下面的错误-

React Hook "useState" 在函数 "setResults" 中调用，它既不是 React 函数组件，也不是自定义 React Hook 函数 react-hooks/rules-of-hooks

2. 作为第二个替代方案，我试图从 searchUser 返回值并在下面的函数中访问它，但仍然没有用

我是钩子的新手，任何帮助/指针都会有所帮助。

Answer 1

你需要把第一个字母大写 setResults => SetResults

function SetResults(textInput) {
    const [data, setData] = useState({ users: [] });
    searchUser(textInput).then(result => {
        useEffect(() => {
            searchUser(textInput).then(result => {
                setData(result.users);
            });
        }, []);
    });
}

Answer 2

函数名必须以大写字母开头。所以你的函数的名称是 setResults 。您必须将其更改为 SetResults。

Answer 3

Hooks 基本上让你可以在函数组件中使用状态和其他 React 类组件功能。因此，在常规 JavaScript 函数中调用 Hooks 是不允许的。您只能在函数组件的顶层或自定义 Hook 中执行此操作。

在 Hooks 中这样思考：

• useState与类组件中的this.setState类似。
• useEffect类似于类组件中的componentDidMount和componentDidUpdate 。

React 文档有一节解释了使用钩子的规则：

https://reactjs.org/docs/hooks-rules.html