Почему установленное состояние не работает в подписке на наблюдаемое?

Question

В приведенном ниже коде есть функция displayQuotes, которая импортирует наблюдаемое, «next» - это кавычки. С каждой новой цитатой я хотел бы обновлять состояние цитат с помощью перехватчиков реакции. Я создал собственный хук, который принимает наблюдаемое, подписывается на него и с каждым новым значением устанавливает состояние. Я обнаружил, что, хотя я регистрирую все новые входящие котировки, похоже, что мой setState никогда не вызывается после первого раза. Любые предложения относительно того, почему происходит такое поведение?

код:

const UseCustomHookForObservable = (observable, setState) => {
  useEffect(() => {
    let subscription=observable.subscribe((value) => {
      setState(value);
    });

    return () => subscription.unsubscribe();
  }, [observable, setState]);
};

function DisplayQuotes() {
  const [storedQuotes, setQuotes] = useState({});
  UseCustomHookForObservable(SymbolsObservable, setQuotes);

  return (
    <div>
      <QuotesTable values={storedQuotes} />
    </div>
  );
}

Что еще более странно для меня, так это то, что работает следующее:

function DisplayQuotes() {
  return (
    <div>
      <RenderSubscribedValues
        observable={SymbolsObservable}
        component={QuotesTable}
      />
    </div>
  );

class RenderSubscribedValues extends React.Component {
  constructor(props) {
    super(props);
    this.observable = props.observable;
    this.component = props.component;
    this.state = { storedValues: {} };
  }
  componentDidMount() {
    this.subscription = this.observable.subscribe((value) =>
      this.setState({ storedValues: value })
    );
  }
  componentWillUnmount() {
    this.subscription.unsubscribe();
  }
  render() {
    const Component = this.component;
    return (
      <div>
        <Component values={this.state.storedValues} />
      </div>
    );
  }
}
}

I у меня создалось впечатление, что useEffect и его оператор return по сути то же самое, что componentDidMount и componentWillUnmount?

Answer 1

Ваше состояние не обновляется, поскольку useEffect в UseCustomHookForObservable выполняется только один раз. Поскольку хуки вызываются только один раз, SymbolsObservable не обновляется в ваших пользовательских хуках, что препятствует повторному запуску useEffect.

Сделайте это, как показано ниже.

const useCustomHookForObservable = (initialObservable) => {
  const [storedQuotes, setQuotes] = useState({});
  const [observable, setObservable] = useState(initialObservable);
  useEffect(() => {
    observable.subscribe((value) => {
      setQuotes(value);
    });

    return () => observable.unsubscribe();
  }, [observable]);
  return {storedQuotes, setObservable}
};

function DisplayQuotes() {

  const {storedQuotes, setObservable} =  useCustomHookForObservable(SymbolsObservable);

  useEffect(() => {setObservable(SymbolsObservable)}, [SymbolsObservable])

  return (
    <div>
      <QuotesTable values={storedQuotes} />
    </div>
  );
}

Я показал функцию установки, которая гарантирует, что ваш useEffect запускается столько раз, сколько SymbolsObservable обновлений.

Это лучший способ сделать это правильно. Он извлек ваш лог-файл с отслеживанием состояния c из компонента реакции и сделал его более чистым.