0

Делаю таблицу заказов в React, в которой должны быть реализованы функции поиска и сортировки:

В качестве источника данных выступают 3 массива объектов (orders.json, users.json, companies.json), которые взаимосвязаны между собой таким образом, что по {key: value} из orders.json находится user_id из users.json и по такому же принципу связь users.json -> companies.json;

передаю данные компонентам раздельно в качестве props по иерархии сверху вниз;

колонки у таблицы такие:

  const columns = [
{ key: "id", title: "Transaction ID" }, //orders.json
{ key: "info", title: "User Info" }, //users.json + companies.json
{ key: "date", title: "Order Date" }, //orders.json
{ key: "amount", title: "Order Amount" }, //orders.json
{ key: "number", title: "Card Number" }, //orders.json
{ key: "type", title: "Card Type" }, //orders.json
{ key: "location", title: "Location" } //orders.json ];

для рендера строки с заказом перебираю orders и пушу все строки в массив, элементы которого - шаблон OrdersRow для каждого заказа, и в итоге массив потом передается в tbody:

 class Table extends React.Component {
  render() {
  const filterText = this.props.filterText;
  const user = this.props.users;
  const company = this.props.companies;
  const order = this.props.orders;
  const ordersList = [];
  order.forEach( (order) => {
    if ( order.transaction_id.indexOf(filterText) !== -1 ) {
        return ordersList.push(
            <OrderRow
              user={user}
              order={order}
              company={company}
              key={order.id}
            />);
      }
  });
  return (
    <table>
      <TableHead />
      <tbody>
        {ordersList}
      </tbody>
    </table>
  );
  }
};

в шаблоне строки OrderRow обращаюсь к users и помещаю соответствующую информацию в ячейку - User Info:

  class OrderRow extends React.Component {
    constructor(props) {
    super(props);    
  }

  render() {
  const order = this.props.order;
  const user = this.props.user;
  const company = this.props.company;

  return (
    <tr id={'order_' + order.id}>
      <td>{order.transaction_id}</td>
      <td className="user_data">{userInfo(order.user_id, user)}</td>
      <td>{fullTimeConverter(order.created_at)}</td>
      <td>{'$' + order.total}</td>
      <td>{cardMask(order.card_number)}</td>
      <td>{order.card_type}</td>
      <td>{order.order_country + " " + '(' + order.order_ip + ')'}</td>
    </tr>
  );
}
};

Фильтрация таблицы должна быть в том числе и по колонке User Info, но строю массив заказов я на основе orders.json и столкнулся с тем, что при данном подходе могу фильтровать (filterText) по данным из orders (тут в качестве примера по order.transaction_id) и не могу отфильтровать таблицу по пользователям.

Вопрос: логично ли объединение всех данных в один массив data=[orders, users, companies], чтобы реализовать фильтрацию, а данные из data потом использовать для построения строк в шаблоне строки OrderRow или это плохая идея? Если плохо - то как использовать несколько источников данных для рендера строк? Как чаще всего поступают в таких случаях, когда источников взаимосвязанных данных - несколько?

3
  • Возможный дубликат вопроса: Группированные React компонентов для вывода в списке 28 фев 2019 в 8:45
  • @AlexandrTovmach в моем случае связь между источниками данных такая:(orders.user_id === users.id) и (users.company_id === companies.id). Возможно если я объединю всё в один массив data и через map() реализую рендер строки при условии (data.user_id === data.id) и (data.company_id === data.id). Но у меня в источниках данных повторяются ключи id, т.е. есть orders.id, users.id и companies.id. Поэтому вряд ли решение вопроса, что вы предложили выше - сработает. Что думаете? 28 фев 2019 в 10:03
  • Что вам мешает во время объединения в один массив унифицировать id, добавив к ним префиксы id = "user" + object.id? 1 мар 2019 в 5:06

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Посмотрите другие вопросы с метками или задайте свой вопрос.