Как сопоставить идентификаторы ссылок из ответов API

Question

У меня есть два ответа API. Один из них - это массив объектов (продуктов) , а другой - отдельный объект (пользователь). Каждый продукт имеет свойство ID, соответствующее идентификатору пользователя внутри пользователя. Для каждого продукта я хочу отобразить информацию о пользователе (имя, адрес электронной почты) путем сопоставления идентификатора пользователя с идентификатором в Product.

Я пытаюсь сделать это, передав свойство userID от родителя, OrderList , для ребенка, UserInfo.

export class OrderList extends React.Component {
  componentDidMount() {
    this.props.fetchOrdersAndUsers();
  }

  renderList() {
    return this.props.orders.map(order => {
      return (
        <div key={order.orderId}>
          <h3>{order.name}</h3>
          <UserInfo userId={order.id} />
        </div>
      );
    });
  }

  render() {
    return <div>{this.renderList()}</div>;
  }
}

const mapStateToProps = state => {
  return {
    orders: state.theOrders.ordersArr
  };
};

У меня есть действие, которое должно вызвать меня одного пользователя, передав ему идентификатор. И еще одно действие, которое должно получить все заказы и 1 пользователь. (Нет конечной точки для одновременной выборки всех пользователей)

export const fetchUser = id => {
  return async dispatch => {
    const results = await user.get(`/users/${id}`);

    dispatch({ type: 'FETCH_USER', payload: results.data.user });
  };
};

export const fetchOrdersAndUsers = (dispatch, getState) => {
  return async (dispatch, getState) => {
    await dispatch(fetchOrders());

    const allOrders = getState().theOrders.ordersArr;
    allOrders.forEach(order => {
      return dispatch(fetchUser(order.id));
    });
  };
};

Внутри моего компонента UserInfo я передал свойство userID из родительского объекта функции fetchUser, но получаю ошибки

class UserInfo extends React.Component {
  render(){
    return (
      <div>
        <h4>{this.props.userId}</h4> 
        <p>{this.props.fetchUser(this.props.userId).name}</p> // doesn't work
      </div>
    );
  }
}

Как извлечь идентификатор из продукта, сопоставив его с правильным идентификатором пользователя?

Answer 1

Когда вы отправляете действие fetchUser в компоненте UserInfo, оно обновляет состояние (при условии, что ваш редуктор настроен на это). Он не возвращает объект пользователя вашему компоненту. Поэтому вам нужно передать пользовательский объект из хранилища в ваш компонент в качестве опоры, так же, как вы делаете это для orders в OrderList с mapStateToProps.

Я рекомендую вам реструктурировать ваши компонентыи измените способ вызова API, чтобы сделать этот процесс более эффективным.

Например, попробуйте выбрать пользователей и заказы в OrderList componentDidMount и передать объект user до UserInfo. Вот один из возможных способов сделать это (обратите внимание, что вам нужно обновить свои действия и редукторы, чтобы получить всех пользователей и поместить их в хранилище):

OrderList:

export class OrderList extends React.Component {
  componentDidMount() {
    this.props.fetchOrdersAndUsers();
    this.props.fetchUsers();
  }

  renderList() {
    return this.props.orders.map(order => {
      return (
        <div key={order.orderId}>
          <h3>{order.name}</h3>
          <UserInfo userId={order.id} user={this.props.users[order.id]} />
        </div>
      );
    });
  }

  render() {
    return <div>{this.renderList()}</div>;
  }
}

const mapStateToProps = state => {
  return {
    orders: state.theOrders.ordersArr,
    users: state.users
  };
};

UserInfo:

class UserInfo extends React.Component {
  render(){
    return (
      <div>
        <h4>{this.props.userId}</h4> 
        <p>{this.props.user.name}</p>
      </div>
    );
  }
}