Блог

У меня есть данные, которые я бы извлекал из api, хранящегося как items ,

 { '001': {id: '001', name:'foo',color:'blue' }}, '002': { id: '002',name:'bar',color:'orange' }, '003': { id: '003',name:'baz',color:'pink' }}
  

который был бы добавлен в мое дерево состояний redux и определял бы, что отображается по определенному пути. Например, переход к /foo перенаправил бы пользователя на страницу с фоновым цветом соответствующего цвета, blue . У меня есть некоторый код, который я начал, пытаясь реализовать это, но не понимаю, как я буду это координировать. Я рассматривал возможность выполнения чего-то вроде running Object.keys(props.items).find(id => props.items[id].name === match.params.name) , но понял, что это не было бы супер масштабируемым решением и привело бы к потере поиска O (1), предоставляемого наличием объекта. Код находится здесь:https://codesandbox.io/s/n562wzzmkm

Если вы хотите использовать name свойство в качестве пути к каждому элементу, то упомянутый вами метод сопоставления (searching / нахождение), на мой взгляд, вероятно, является лучшим вариантом. Поскольку name каждый элемент находится на одном уровне ниже, нам приходится искать соответствие во всех наших элементах match.params.id onClick , чтобы отобразить <Detail/> компонент s с правильными данными элемента.

Но, если вы открыты для этого, я бы предложил вам использовать ключ верхнего уровня каждого элемента (т. Е. 001 , 002 , 003 ) в качестве to реквизита для ваших сопоставленных <Link/> компонентов. Таким образом, мы все еще можем достичь O (1), используя этот метод в сочетании с render prop for your <Route/> , который обрабатывает рендеринг <Detail/> компонента с данными выбранного элемента. Мы по-прежнему будем выполнять поиск с помощью match.params.id , но нам нужно будет смотреть только на верхний уровень items , чтобы найти правильный элемент и успешно установить правильный цвет фона.

Приведенный ниже код и ответвление вашего CodeSandbox:https://codesandbox.io/s/xl8von46nw?fontsize=14

 /**** Setting each to prop equal to the top-level id for each item ****/

  <ul>
    {Object.keys(items).map(id => (
      <li key={id}>
        <Link to={id}>item {items[id].name}</Link>
      </li>
    ))}
  </ul>

/**** I used connect() in routes.js to access items ****/

  <Route
    path="/:id"
    render={({ match }) => (
      <Detail
        item={items[match.params.id]}
      />
    )}
  />

  

Надеюсь, это поможет или является приемлемым решением!