Question

尝试通过react-redux调用两个API。编写了减速器和动作。请找到代码。

`````````
     home.js
    componentDidMount() {
    const URL = GET_ALL_ENTITIES;
    const ETURL = GET_ALL_TENANT_ENTITIES;

     this.props.GetAllEntitesAction(URL,header,"DISPLAY_ALL");
      // how to catch below api response
     this.props.GetTenantEntitesAction(ETURL,header,"DISPLAY_ALL_TENANTS")

    }

    static getDerivedStateFromProps(nextProps, prevProps) {
    if (nextProps.responseData != prevProps.responseData) {
      return {
        responseData: nextProps.responseData,
      };
    }
       return null;
   }

   componentDidUpdate(prevProps) {
      if (this.props.responseData != this.state.response) {
        this.setState({ 
        response: this.props.responseData,
        });
      }
   }

  render() {
    let {response}=this.state;
    console.log("allentitiesData",response.allentitiesData)
    console.log("alltenants",response.alltenants) //Getting undefined
   }


    reducer.js
     let newState = {};
      const HomeReducer = (state=[],action)=>{

       switch (action.type) {
         case 'DISPLAY_ALL':
          newState.allentitiesData = action.payload;
          break;

          case 'DISPLAY_ALL_TENANTS':
          newState.alltenants = action.payload;
          break;

       default: return state;
     }

     return newState;
 };

  export default HomeReducer;

如果我同时调用这两个API，则其中之一会被覆盖或未定义。如何我抓住并展示了他的回答。我已经尝试过将状态设置为
响应：this.props.responseData.allentitiesData，但给出的是“最大更新深度超过componentdidupdate'错误。我们该怎么做？

Answer 1

“最大更新深度超出componentDidUpdate”错误是由无限循环引起的。

如果MessageHistory或this.props.responseData != this.state.response是一个对象，

true将始终返回props.responseData。这是因为您试图通过引用比较它们。因此，您的代码将继续调用state.response，并会触发另一个this.setState。

您可以使用Lodash检查对象是否相等。

如何使用redux和getDerivedStateFromProps和componentdidupdate调用两个API

1 个答案: