reactjs - 如何在执行 render() 之前从 reducer 获取 prop 值？

Question

我使用了 redux-thunk 中间件，并且仅在执行渲染后才从 props 接收值。在调用渲染之前，如何在道具中设置“内容”的值？

UNSAFE_componentWillMount() {
    this.getAllArticle();
}

getAllArticle = () => {
    this.props.onGetAllArticle(); `
}

render() {

 {this.props.contents ? this.props.contents.map((obj, index) => (
                        <tr key={index}>
                            <td> {obj.id} </td>
                            <td> {obj.title}</td>
                            <td> {obj.context}</td>
                        </tr> 
                    )) : 'No Data'}}

function mapStateToProps(state) {
 return {
   contents: state.all
 }
}

function mapDispatchToProps(dispatch) {
 return { 
   onGetAllArticle: () =>dispatch(actionCreator.onGetAllArticle())
  }
 }

export default connect(mapStateToProps, mapDispatchToProps)(All);

标签： reactjsreduxreact-reduxreact-propsreact-lifecycle

Answer 1

由于您触发了调度调用UNSAFE_componentWillMount（我不推荐，因为它的名称暗示它是不安全的并且将被弃用），您收到的响应将仅在初始渲染后可用。

解决方案是在获取数据时向用户显示加载状态，因为您不会在初始渲染时获得数据。为此，您的减速器中有一个加载状态，该状态最初设置为 true

render() {

   {this.props.contents ? this.props.contents.map((obj, index) => (
                        <tr key={index}>
                            <td> {obj.id} </td>
                            <td> {obj.title}</td>
                            <td> {obj.context}</td>
                        </tr> 
                    )) : this.props.isLoading? 'Loading...': 'No Data'
   }
}

function mapStateToProps(state) {
 return {
   contents: state.all,
   isLoading: state.isLoading
 }
}

function mapDispatchToProps(dispatch) {
 return { 
   onGetAllArticle: () =>dispatch(actionCreator.onGetAllArticle())
  }
 }