React Hook "useState" вызывается в функции "setResults", которая не является ни компонентом функции React, ни пользовательской функцией React Hook

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. searchUser вызывает действие и извлекает данные успешно, но я не уверен, почему состояние обновляется - я получил ошибку ниже -

React Hook "useState" вызывается в функции "setResults", которая не является ни компонентом функции React, ни пользовательской функцией React Hook response-hooks / rules-of-hooks

2. В качестве второго альтернативного варианта я пытаюсь вернуть значения из 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 . вам нужно изменить его на SetResults.

Answer 3

Имена функциональных компонентов React должны начинаться с заглавной буквы. Если вы менипулируетеsetResults к SetResults, тогда это будет работать.

А Hooks не поддерживает обычные классы javascript, поэтому попробуйте создать другой компонент с именем SetResults. И включить его в основной компонент

Answer 4

На самом деле setResults нужно писать с заглавной буквы.

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

Примечание. Если вы не используете перехватчики реакции, вам не нужно писать первую букву имени функции с большой буквы, но при использовании перехватчиков первая буква вашей функции должна быть заглавной.

Подобный вопрос обсуждается здесь,

React Hook "useState" вызывается в функции "app", которая не является ни компонентом функции React, ни пользовательской функцией React Hook.

Answer 5

Функция реагирования должна возвращать визуализируемый JSX, чтобы быть распознанным как функция Реакции. Вы используете "setResults" в качестве вспомогательной функции - она ​​не возвращает визуализируемый JSX. Таким образом, ошибка 'React Hook "useState" вызывается в функции "setResults", которая не является ни компонентом функции React, ни пользовательской функцией React Hook response-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 6

Хуки в основном позволяют вам использовать состояние и другие функции компонентов класса React в компонентах функций. Таким образом, вызов Hooks в обычной функции JavaScript не допускается. Вы можете сделать это только на верхнем уровне функциональных компонентов или в ваших пользовательских хуках.

Думайте в Крюках как это:

• useState похож на this.setState в компонентах класса.
• useEffect аналогично componentDidMount и componentDidUpdate в компонентах класса.

В React Docs есть раздел, объясняющий правила использования хуков:

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