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

IT技术 javascript reactjs react-hooks use-effect
2021-04-27 05:59:29

我正在尝试在作为react挂钩的功能组件中进行 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

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

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

4个回答

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

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

React 功能组件名称必须以大写字母开头。如果您操纵setResultsto SetResults，那么它将起作用。

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

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

实际上 setResults 需要像这样大写

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

注意：如果您没有使用 react hooks，那么您不必将函数名称的第一个字母大写，但是使用 hooks 需要您的函数的第一个字母大写。

类似的问题在这里讨论，

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

其它你可能感兴趣的问题
上一篇WebSocket 握手期间出错：意外响应代码：302 下一篇用聚氨酯、电子玻璃和聚四氟乙烯制成的哪种塑料最容易 3D 打印？