Question

对于React应用程序，我正在使用Redux从API提取数据。在此应用程序中，存在一个在同一页面上两次显示的组件。该组件连接到一个动作和减速器。

该组件的两个实例都应显示不同的数据：一个显示某人的工作，另一个显示某人的电话号码。这两种情况都是在单独的API调用中请求的，从而导致第二个调用的数据覆盖在连接到组件的化简器中的第一个调用中获得的数据的问题。

如何对显示两次的组件进行两次API调用，使其两个实例都显示其中一个api调用的数据？

我尝试了以下操作：发出一个请求并填充减速器。然后发出另一个请求，并将两者的结果合并到reducer中。但是，这种方法的问题在于，还可能只显示应用程序中的一个组件。

这是react组件：

class Display extends React.Component {
  componentWillMount() {
    const { fetchpayload } = this.props;
    fetchpayload(this.props.parameter);
  }

  render() {
    return (
        <h1>{this.props.payload}</h1>
    );
  }
}

const mapStateToProps = (state) => ({
  payload: state.DisplayReducer.payload,
});

const mapDispatchToProps = (dispatch) => bindActionCreators(
  {
    fetchpayload: payloadAction,
  },
  dispatch,
);

这是减速器

const initialState = {
  payload: [],
};

export function DisplayReducer(state = initialState, action) {
  switch (action.type) {
    case 'FETCHED_DISPLAY':
      return {
        ...state,
        payload: action.payload,
      };
      return state;
  }
}

操作文件发出请求，并分派“ FETCHED_DISPLAY”。

Answer 1

只是不要覆盖您在reducer中的内容

const InitialState = {
  person: {
    name: '',
    job: ''
  }
};

export default (state = InitialState, action) => {
  switch(action.type) {
    case NAME:
      return {
        ...state.person,
        person: {
          job: ...state.person.job,
          name: action.payload
        }
      }
    case JOB:
      return {
        ...state.person,
        person: {
          name: ...state.person.name,
          job: action.payload
        }
      }
 // do that with whatever property of object person you would want to update/fetch
    }
  }
}

希望这会有所帮助。

启用一个组件可以显示来自两个API提取的数据

1 个答案: