web-dev-qa-db-ja.com

Reactフック "useState"は、関数 "setResults"で呼び出されますが、これはReact関数コンポーネントでもカスタムでもありません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フック関数react-hooks/rules-of -フック

  1. 2番目の代替手段として、私はsearchUserから値を返し、以下の関数でそれにアクセスしようとしていますが、まだ使用していません

私はフックに不慣れで、ヘルプ/ポインターは役に立ちます。

javascriptreactjsreact-hooksuse-effect
4
beta programmers

React機能コンポーネントの名前は大文字文字で始める必要があります。 setResultsからSetResultsを操作すると、機能します。

また、フックは通常のJavaScriptクラスではサポートしていないため、SetResultsという名前で他のコンポーネントを作成してみてください。そしてそれをメインコンポーネントに含めます

1
hanuman kumar

実際、setResultsは次のように大文字にする必要があります

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

注：反応フックを使用していない場合は、関数名の最初の文字を大文字にする必要はありませんが、フックを使用すると、関数の最初の文字が大文字になると想定されます。

同様の問題がここで議論され、

React Hook "useState"は、React関数コンポーネントまたはカスタムReactフック関数 のどちらでもない関数 "app"で呼び出されます

1
Sandeep Amarnath

フックを使用すると、基本的には、状態やその他のReactクラスコンポーネント機能を関数コンポーネントで使用できます。したがって、通常のJavaScript関数でフックを呼び出すことはできません。関数コンポーネントの最上位レベルでのみ実行できますまたはカスタムフックで。

このようにフックで考えてください：

  • useStateは、クラスコンポーネントのthis.setStateに似ています。
  • useEffectは、componentDidMountおよびcomponentDidUpdateに似ていますクラスコンポーネント。

React docsには、フックを使用するためのルールを説明するセクションがあります。

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

0
João Paulo de Farias