Question

我正在开发一个带有助焊剂实现的反应应用程序。

我有一个绑定到组件的商店，并在ctor中设置了一些默认（空白）状态值。在componentWillMount中，我通过触发一些更新商店数据的操作来填充状态。商店发出更改，组件通过将商店数据的位置放入状态来处理更改。

在我的render方法中，我希望渲染依赖于状态数据。

目前我有几个问题。

如果在我的render方法中我执行类似this.state.MyThing.AProperty的操作，那么当MyThing尚未填充时，过早调用render方法。这似乎发生在很多我希望渲染使用状态数据的地方。是否有明智的警惕，或者我做错了吗？
我正在使用商店发出更改，并通过从商店获取数据并将其设置为组件的state来处理该更改。我的想法是，如果我将其设置为状态，那么组件将知道在状态改变时重新渲染。它是否正确？或者我应该从emit处理程序中的商店获取数据并直接使用它？或者将其设置为组件中的局部变量？我问的原因是我似乎遇到问题setState调用不是立即的，并且一旦我设置它就想要使用状态。考虑到这一点，似乎我可能做错了。

任何想法都非常感激。

Answer 1

如果在渲染中使用条件，则可以防止渲染未填充的数据。

<div>
  {typeof this.state.myThing == 'object' ?
    <strong>this.state.myThing.aProperty</strong> :
    <span>Nothing to see here</span>}
</div>

关于你的第二个问题，是的。这完全没问题，这是与Flux合作的预期方式。你甚至可以从Redux＆amp; amp; Co并制作higher order components that map store state to props。

function connect(store, mapStateToProps, Component) {
  return React.createClass({
    getInitialState() {
      const state = store.getState();
      return { state };
    },
    componentWillMount() {
      store.listen(state => this.setState({ state }));
    },
    render() {
      const stateProps = mapStateToProps(this.state);
      const passedProps = this.props;
      const props = Object.assign({}, stateProps, passedProps);
      return <Component {...props} />;
    }
  });
}

此模式允许您获取现有组件并将其包装在容器中，该容器将在商店更改时重新呈现，然后使用mapStateToProps函数计算出哪些道具传递给你的原始组件。

const MyStore = { ... };

const MyComponent = React.createClass( ... );

function mapStateToProps(state) {
  return { foo: state.bar.foo };
}

export default connect(MyStore, mapStateToProps, MyComponent);

setState是一种非同步方法，因为它需要进行批处理以防止React应用程序在触发大量更新时延迟重新绘制。您可以通过将回调作为第二个参数传递来可靠地等待状态更改。

this.setState({ foo: 'bar' }, () => this.state.foo);

在反应/通量应用中访问和设置状态

1 个答案: