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 реагировать-крюки / правила из-крючков

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

Я новичок в хуках, и любая помощь / указатели будут полезны.

Answer 1

Функция реагирования должна возвращать визуализируемый 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 2

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

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

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

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

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