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

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. search chUser正在调用操作并成功获取数据，但我不确定为什么状态正在更新-我得到了以下错误-

在函数“setResults”中调用React钩子“useState”，该函数既不是React函数组件，也不是自定义React钩子函数React钩子/钩子规则

我不熟悉挂钩，任何帮助/指针都会很有帮助。

Answer 1

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

Answer 2

React功能组件名称必须以大写字母开头。如果将setResults填充到setResults，则它将工作。

并且钩子在常规javascript类中不支持，所以请尝试创建另一个名为SetResults的组件。并将其包含在主要组件中

Answer 3

您需要将第一个字母放在大写的setResults中=

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