النتائج غير المتزامنة والأخطاء والحداثة

import {useEffect, useState} from 'react';
import {Text} from 'react-native';
export default function SearchResult({query, repository}) {
  const [state, setState] = useState({phase: 'loading'});
  useEffect(() => {
    let active = true;
    setState({phase: 'loading'});
    Promise.resolve().then(() => repository.search(query)).then(
      items => { if (active) setState({phase: 'ready', items}); },
      () => { if (active) setState({phase: 'failed'}); },
    );
    return () => { active = false; };
  }, [query, repository]);
  if (state.phase === 'loading') return <Text>Loading</Text>;
  if (state.phase === 'failed') return <Text>Search failed</Text>;
  return <Text>{state.items.join(', ') || 'No matches'}</Text>;
}

Only the currently active Effect may publish Loading, Search failed, or its accepted results.

يفترض المثال أن نتائج المستودع مصفوفات نصوص متحقق منها مسبقا. يسحب التنظيف حق النشر، ولا يدّعي إلغاء النقل.

let generation = 0;
let visible = null;
function begin() { return ++generation; }
function publish(ticket, result) {
  if (ticket === generation) visible = result;
}
const a = begin();
const b = begin();
publish(b, {phase: 'ready', title: 'Rivers'});
publish(a, {phase: 'failed'});
console.log(JSON.stringify(visible));

{"phase":"ready","title":"Rivers"}

لا يستطيع الفشل القديم تغطية النجاح الأحدث. يثبت النموذج قاعدة اعتماد، لا إلغاء طلب فعليا أو تفويضا.