Как сохранить массив в const

Question

я знаю, что мой вопрос неясен, мой вопрос, я хочу напечатать свой массив, используя карту в JSX, но я не хочу делать это несколько раз на одной странице, так как решить эту проблему

также, как добавить идентификатор в ссылке

мой код

<ul>
    <li><b>Admin info</b></li>
            {users.items && users.items.map((item,i) => <li key={i}>{item.email}</li>)}
    <li><Link to="/admin/5c4f69d5259f7d14434b4cb6">Admin pass and info {data}</Link></li>
    <li></li>
</ul>
<ul>
     <li><b>Company Info</b></li>
     <li>Company Profile </li>
     <li>Billing Address and Billing contact</li>
     <li> {users.items && users.items.map((item,i) => <li key={i}>{item.email}</li>)}</li>
    <li></li>
 </ul>

Answer 1

Поскольку возвращаемое значение карты такое же, вы можете превратить его в компонент, если его можно использовать и в других компонентах

const MapComponent = ({users}) => (
    return users.items && users.items.map((item,i) => <li key={i}>{item.email}</li>)
)

и использовать его как

    <ul>
        <li><b>Admin info</b></li>
        <MapComponent users={users} />
        <li><Link to="/admin/5c4f69d5259f7d14434b4cb6">Admin pass and info {data}</Link></li>
        <li></li>
    </ul>
    <ul>
        <li><b>Company Info</b></li>
        <li>Company Profile </li>
        <li>Billing Address and Billing contact</li>
        <li> <MapComponent users={users} /></li>
        <li></li>
    </ul>

илииначе сохраните его в переменной в методе рендеринга

render() {
      const userItems = users.items && users.items.map((item,i) => <li key={i}>{item.email}</li>)
      return (
           <ul>
            <li><b>Admin info</b></li>
            {userItems}
            <li><Link to="/admin/5c4f69d5259f7d14434b4cb6">Admin pass and info {data}</Link></li>
            <li></li>
        </ul>
        <ul>
            <li><b>Company Info</b></li>
            <li>Company Profile </li>
            <li>Billing Address and Billing contact</li>
            <li> {userItems}</li>
            <li></li>
        </ul>
     )
}

Если содержимое должно измениться, вы можете использовать шаблон реквизита рендеринга

const MapComponent = ({data, children}) => (
    return data && data.map((item,i) => children(item))
)

и использовать как

    <ul>
        <li><b>Admin info</b></li>
        <MapComponent data={users.item}>
           {(item) => <li key={i}>{item.email}</li>}
        </MapComponent>
        <li><Link to="/admin/5c4f69d5259f7d14434b4cb6">Admin pass and info {data}</Link></li>
        <li></li>
    </ul>
    <ul>
        <li><b>Company Info</b></li>
        <li>Company Profile </li>
        <li>Billing Address and Billing contact</li>
        <li> 
            <MapComponent data={users.item}>
                 {(item) => (
                      <ul><li>{item.name}</li><li>{item.email}</li></ul> 
                 )}
            </MapComponent>
        </li>
        <li></li>
    </ul>

Answer 2

Скажем, ваш код в рендере, тогда вы можете временно сохранить результат карты в переменной и использовать его в другом месте, как показано ниже

render() {
  const mappedItems = users.items && users.items.map((item,i) => <li key={i}>{item.email}</li>);
  return (
   <ul>
        <li><b>Admin info</b></li>
        {mappedItems}
        <li><Link to="/admin/5c4f69d5259f7d14434b4cb6">Admin pass and info {data}</Link></li>
        <li></li>
    </ul>
    <ul>
        <li><b>Company Info</b></li>
        <li>Company Profile </li>
        <li>Billing Address and Billing contact</li>
        <li>{mappedItems}</li>
    </ul>
  );
}