プロジェクトにすべての人に共通のナビゲーションバーがあり、入力テキストフィールドがあります
<input
placeholder="Search Assets"
type="text"
id="searchTerm"
onChange={this.searchAsset}
value={this.state.searchValue}
/>
および関数onChangeライブラリページにリダイレクトしています
searchAsset = event => {
const searchValue = event.target.value;
this.setState({ searchValue });
if (searchValue.trim().length > 2) {
this.props.history.push(`/company/library?q=${searchValue}`);
}
};
ライブラリページで、componentDidMount（）で検索アクションを呼び出しています
componentDidMount() {
const params = new URLSearchParams(this.props.location.search);
const q = params.get('q');
this.setState({ searchValue: q });
this.props.actions.searchAssets({ page: 0, searchString: q });
}
今、問題は私が再び検索しているときです-最初に「画像」を検索し、結果を取得した後、トップナビゲーションのテキストを削除し、もう一度「ダウンロード」というテキストを検索したとしましょう。バックエンドからの応答がありません。
今私はこの問題を達成したい
componentDidUpdate(prevProp, prevState) {
const params = new URLSearchParams(this.props.location.search);
const q = params.get('q');
if (q !== prevState.searchValue) {
this.props.actions.searchAssets({ page: 0, searchString: q });
}
}
そして、「最大更新深度を超えました」というエラーが発生します。これは、コンポーネントがcomponentWillUpdateまたはcomponentDidUpdate内でsetStateを繰り返し呼び出す場合に発生する可能性があります。
お使いのcomponentDidUpdateバージョンがバージョンと完全に一致していませんcomponentDidMount。常に状態を比較qしますprevState.searchValueが、更新しないため、次の更新では比較はfalseになります。q !== prevState.searchValuefalseになることはなく、レンダリングループが発生する一連のアクションをキューに入れているように見えます。
次の状態更新の比較のために現在の検索結果をキャッシュして、新しい検索クエリが到着したときにのみ効果が実行されるようにします。
componentDidUpdate(prevProp, prevState) {
const params = new URLSearchParams(this.props.location.search);
const q = params.get('q');
if (q !== prevState.searchValue) {
this.setState({ searchValue: q }); // <-- update state with search value
this.props.actions.searchAssets({ page: 0, searchString: q });
}
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加