8

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

6 回答 6

22

您需要将第一个字母大写 setResults => SetResults

function SetResults(textInput) {
    const [data, setData] = useState({ users: [] });
    searchUser(textInput).then(result => {
        useEffect(() => {
            searchUser(textInput).then(result => {
                setData(result.users);
            });
        }, []);
    });
}
于 2019-09-27T16:30:30.840 回答
3

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

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

于 2019-12-18T16:48:29.613 回答
3

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

于 2020-10-22T18:01:04.483 回答
2

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>);
}
于 2019-06-05T21:01:25.050 回答
2

实际上 setResults 需要像这样大写

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

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

类似的问题在这里讨论，

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

于 2020-01-16T17:12:25.190 回答
0

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

像这样在 Hooks 中思考：

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

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

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

于 2019-06-05T17:26:51.390 回答