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);

Answer 1

由于您在UNSAFE_componentWillMount中触发了调度调用（我不建议这样做，因为名称不建议这样做是不安全的，将不建议使用），因此收到的响应仅在初始渲染后可用。

解决方案是在获取数据时向USER显示加载状态，因为在初始渲染时将没有数据。为此，在减速器中具有初始设置为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())
  }
 }

在render（）执行之前，如何从reducer获取prop值？

1 个答案: