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的操作中。

searchUser正在调用操作并成功获取数据，但是我不确定为什么状态会更新-我遇到了以下错误-

在函数“ setResults”中调用“反应挂钩”“ useState” 无论是React函数组件还是自定义React Hook函数反应钩/钩规则

第二种方法是，我尝试从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必须像这样大写

 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 3

功能名称必须以大写字母开头。因此您函数的名称为setResults。您必须将其更改为SetResults。

Answer 4

react函数需要返回可渲染的JSX才能被识别为React函数。您正在使用“ setResults”作为辅助函数-它没有返回可渲染的JSX。因此，在函数“ setResults”中调用错误“ React Hook“ useState”，这既不是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 5

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

像这样思考钩子：

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

React docs的一节介绍了使用钩子的规则：

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

Answer 6

反应性功能部件名称必须以大写字母开头。如果您将setResults调整为SetResults，则它将起作用。

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

在函数“ setResults”中调用React Hook“ useState”，该函数既不是React函数组件也不是自定义的React Hook函数

6 个答案: