时间戳

首页 > 解决方案 > 为什么 set state 在订阅 observable 时不起作用？

reactjs - 为什么 set state 在订阅 observable 时不起作用？

问题描述

下面的代码有一个函数 displayQuotes，它导入一个“下一个”是引号的可观察对象。对于每个新报价，我想使用反应挂钩更新报价的状态。我创建了一个自定义钩子，它接收一个可观察对象，订阅它，并使用每个新值设置状态。我发现，尽管我记录了所有新传入的报价，但似乎我的 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>
    );
  }
}
}

我一直认为 useEffect 及其返回语句实际上与 componentDidMount 和 componentWillUnmount 相同？

标签： reactjsrxjsreact-hooks

解决方案

抱歉，这可能晚了，但它可能会帮助任何人最终来到这里。

改变你的 'setState(value);' 到 'setState([...value]);' 如果它是一个数组，或者 'setState({...value});' 如果它是一个obj。

推荐阅读