3

我正在使用react-router并导航到在 URL 中获取 ID 的组件，并且必须使用此 ID 在操作的帮助下从服务器获取数据。

目前我正在调用componentWillMount钩子中的动作创建者。

到目前为止，这有效，但带来了一个问题。在渲染方法中，我必须检查myData它的所有属性是否真的存在，然后才能真正渲染。

@connect(state => {myData: state.etc.myData})
export default class extends React.Component {

  componentWillMount = () => {
    this.props.dispatch(
      ActionCreators.getData(this.props.params.id)
    )
  }

  render() {
    if (this.props.myData.hasNotLoaded) return <br/>
    ...
  }

}

是否有另一种方法可以在无需手动检查的情况下在渲染之前将数据放入存储中？

4

2 回答 2

9

您可以订阅路由器的onEnter钩子并从哪里分派操作。

const store = configureStore()
const routing = (<Router>
    <IndexRoute onEnter={()=>store.dispatch(myLoadDataActionCreator())}/>
</Router>)

因此，您可以避免setState以前的答案，并且不要将组件与 redux 捆绑在一起。

于 2015-10-05T16:39:01.293 回答
1

您应该创建一个回调，例如：

_onChange() {
    this.setState(myStore.getData());
}

然后在以下反应函数中执行以下操作：

componentDidMount() {
    myStore.addChangeListener(this._onChange);
},
componentWillUnmount() {
    myStore.removeChangeListener(this._onChange);
}

我假设您正在为 react-router 使用 mixins，如果没有，请查看它的文档，它们有一些有用的功能值得一看。

我认为您不需要if该方法中的逻辑render()，react 将使用虚拟 dom 管理来处理它，并知道何时加载它和数据。

于 2015-08-03T14:33:33.113 回答