反应钩子“useState"在函数“setResults"中调用它既不是 React 函数组件，也不是自定义的 React Hook 函数 [英] React Hook "useState" is called in function "setResults" which is neither a React function component or a custom React Hook function

问题描述

我正在尝试在作为 react-hook 的功能组件中进行 API 调用，并根据结果重新呈现组件的内容.代码如下:

调用 API 的组件-

function IntegrationDownshift() {使成为(<纸方格>{setResults(inputValue).map((建议，索引)=>渲染建议({建议，指数，itemProps: getItemProps({物品:建议.userFullName}),高亮索引，所选项目}))}</纸>);}

这是setResults函数:

function setResults(textInput) {const [data, setData] = useState({ users: [] });搜索用户(文本输入).然后(结果 => {useEffect(() => {搜索用户(文本输入).然后(结果 => {设置数据(结果.用户)；});}, []);});}

我正在尝试获取状态数据并根据数据重新渲染我的组件.此处 searchUser 位于调用外部 API 的操作中.

1. searchUser 正在调用操作并成功获取数据，但我不确定状态更新的原因 - 我收到以下错误 -

<块引用>

React Hook "useState" 在函数 "setResults" 中被调用，它是既不是 React 函数组件也不是自定义 React Hook 函数反应钩子/钩子规则

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

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

解决方案

需要把首字母大写 setResults => SetResults

function SetResults(textInput) {const [data, setData] = useState({ users: [] });搜索用户(文本输入).然后(结果 => {useEffect(() => {searchUser(textInput).then(result => {设置数据(结果.用户)；});}, []);});}

I am trying to make an API call in a functional component which is a react-hook and based on the result, re-render the component's content. Here is the code:

Component which is calling the API-

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

Here is the setResults function:

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

I'm trying to get the state's data and re-render my component based on the data. Here searchUser is in the action which calls the external API.

1. The searchUser is calling the action and fetching the data successfully, but I'm not sure why the state is getting updated - I got the below error -

React Hook "useState" is called in function "setResults" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks

2. As a second alternate, I'm trying to return the values from the searchUser and access it in the below function, still, no use

I'm new to hooks and any help/pointers will be helpful.

解决方案

you need to put the first letter in uppercase setResults => SetResults

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

这篇关于反应钩子“useState"在函数“setResults"中调用它既不是 React 函数组件，也不是自定义的 React Hook 函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！