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

Question

我正在尝试在作为 react-hook 的功能组件中进行 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 函数 反应钩子/钩子规则

1. 作为第二个备选方案，我试图从 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

React 功能组件名称必须以 大写 字母开头。如果你将setResults 修改为SetResults，那么它将起作用。

并且 Hooks 不支持常规 javascript 类，因此请尝试创建一个名为 SetResults 的其他组件。并将其包含在主要组件中

Answer 3

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

Answer 4

其实 setResults 需要像这样大写

 function SetResults(){...} // S capitalized here

注意：如果你没有使用 react 钩子，那么你不必将函数名的第一个字母大写，但使用钩子希望你的函数的第一个字母大写。

这里讨论了类似的问题，

React Hook "useState" is called in function "app" which is neither a React function component or a custom React Hook function

Answer 5

React 函数需要返回一个可渲染的 JSX 才能被识别为 React 函数。您正在使用“setResults”作为辅助函数 - 它不返回可渲染的 JSX。所以错误'React Hook "useState" is called in function "setResults" 这既不是 React 函数组件也不是自定义的 React Hook 函数 react-hooks/rules-of-hooks' 是有道理的。

请参阅这篇关于如何使用 useEffort 获取数据的文章 - 作者对钩子进行了出色的解释。

https://daveceddia.com/useeffect-hook-examples/

试试这个代码

export default function IntegrationDownshift() {

    const [data, setData] = useState({ users: [] });

    // useEffect method is first called prior to render.
    useEffect(  () => {
        async function searchUser() { 
            // This will set Data Set and trigger render method
            setData(result.users);       
        }
        searchUser();
    }, [setData]);

    function renderSuggestion(suggestion) {
        // Pretty print the suggestion data here
        return <div> {suggestion} </div>;
    }
    return ( <Paper square> {data.map( (suggestion, index) => { 
        // Render each Suggestion
        return renderSuggestion( suggestion);
        } )}</Paper>);
}

Answer 6

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

像这样在 Hooks 中思考：

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

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

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