Карта над вложенным массивом объектов

Я пытаюсь сопоставить массив объектов, каждый массив которого содержит другой вложенный массив объектов. Однако карта не работает с вложенным массивом. Как отобразить содержимое вложенного массива?

структура данных для вложенного массива объектов выглядит так:

const items = [
  {
    page_num: 1,
    status: "PROCESSED",
    table_text_data:[
        {bottom:58, height:60, left:60, right:67, text:"recorded"},
        {bottom:75, height:67, left:50, right:60, text:"symbolic"},
        {bottom:80, height:80, left:77, right:89, text:"fever"},
    ]
  }
];

карта для page_num и status выглядит так:

{this.props.items.map(item =>{ 
   return (
        <ul><li> page_num={item.page_num} </li>
         <li> status:{item.status}</li>
          {item.table_text_data.map((c,i)=>( 
           <ul><li>bottom={c.bottom}</li>
           <li>height={c.height}</li>
           <li>left={c.right}</li>
           <li>right={c.left}</li>
           <li>text={c.text}</li></ul>  
         ))}
        </ul>
)})}

page_num и status работают нормально, но не для table_text_data. как я должен отображать через него?

снимок экрана с предупреждением, которое я также получаю: https://i.stack.imgur.com/sqREQ.png

Любая помощь приветствуется. Спасибо


person sanjay srinivasa    schedule 26.10.2020    source источник
comment
stackoverflow.com/a/51615692/12871777 Это должно быть похоже на ваш вопрос, надеюсь, это поможет.   -  person whatismyname123    schedule 26.10.2020
comment
stackoverflow.com/a/51615692/12871777 Это должно быть похоже на ваш вопрос, надеюсь, это поможет.   -  person whatismyname123    schedule 26.10.2020


Ответы (3)


ошибка, которую вы даете, содержит ответ.

Каждый дочерний элемент в списке должен иметь уникальный реквизит key.

вы уже на полпути, извлекая индекс, содержащий вложенный объект. Теперь вам нужно только добавить свойство key={I} к вашему ul

const items = [
  {
    page_num: 1,
    status: "PROCESSED",
    table_text_data:[
        {bottom:58, height:60, left:60, right:67, text:"recorded"},
        {bottom:75, height:67, left:50, right:60, text:"symbolic"},
        {bottom:80, height:80, left:77, right:89, text:"fever"},
    ]
  },
  {
    page_num: 2,
    status: "PROCESSED",
    table_text_data:[
        {bottom:58, height:60, left:60, right:67, text:"recorded"},
        {bottom:75, height:67, left:50, right:60, text:"symbolic"},
        {bottom:80, height:80, left:77, right:89, text:"fever"},
    ]
  }
];
    
const ItemDisplay = (props) => (
  <React.Fragment>
    {props.items.map(item => (
      <ul key={item.page_num}>
        <li>page_num={item.page_num}</li>
        <li>status={item.status}</li>
        {item.table_text_data.map((c,i) => ( 
          <ul key={i}>
            <li>bottom={c.bottom}</li>
            <li>height={c.height}</li>
            <li>left={c.right}</li>
            <li>right={c.left}</li>
            <li>text={c.text}</li>
          </ul>  
        ))}
      </ul>
    ))}
  </React.Fragment>
  );

ReactDOM.render(
  <ItemDisplay items={items} />,
  document.getElementById("react")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="react"></div>

person Sam Apostel    schedule 26.10.2020

Почему бы вам не использовать повторное использование карты массива?

{this.props.items.map((item, i) =>{ 
   return (
        <ul key={'parent' + i}><li> page_num={item.page_num} </li>
         <li> status:{item.status}</li>
          {item.table_text_data.map((c,j)=>( 
           <li  key={'child' + j}>
           <ul><li>bottom={c.bottom}</li>
           <li>height={c.height}</li>
           <li>left={c.right}</li>
           <li>right={c.left}</li>
           <li>text={c.text}</li></ul>
           </li>
         ))}
        </ul>
)})}
person wangdev87    schedule 26.10.2020
comment
Я попробовал это сейчас, но все равно не повезло. он также не выбрасывает ошибку. в чем может быть проблема? - person sanjay srinivasa; 26.10.2020
comment
каково ваше точное требование? и в чем ошибка, которую вы видите? - person wangdev87; 26.10.2020
comment
Я хочу извлечь содержимое внутри table_text_data. это похоже на какую-то логическую ошибку. я отредактировал свой код выше на основе вашего фрагмента. Пожалуйста, проверьте это. - person sanjay srinivasa; 26.10.2020
comment
удалить ‹/ul› в строке 4 - person wangdev87; 26.10.2020
comment
Я сделал. Но все равно не повезло :( - person sanjay srinivasa; 26.10.2020
comment
это похоже на другую проблему. я обновил ответ, завернув каждый внутренний UL в LI. - person wangdev87; 26.10.2020
comment
все равно не повезло. но я столкнулся с этим предупреждением Warning: Each child in a list should have a unique "key" prop - person sanjay srinivasa; 26.10.2020
comment
попробуйте обновленный ответ, он удалит такое ключевое предупреждение - person wangdev87; 26.10.2020
comment
я пробовал с обновленным ответом, но все равно не повезло :( - person sanjay srinivasa; 26.10.2020
comment
дайте мне знать ваш скриншот - person wangdev87; 26.10.2020
comment
jsfiddle.net/sanjay_s/86npfk4a contains 2 files app.js and popup.js пожалуйста, проверьте это. благодарю вас - person sanjay srinivasa; 26.10.2020
comment
i.stack.imgur.com/z42bJ.png data structure of table_text_data - person sanjay srinivasa; 26.10.2020

вы можете использовать функцию вложенной карты для доступа к файлам. но вам нужно указать, что вложенная карта() должна работать только для свойства table_text_data, иначе ваша родительская функция карты будет проверять содержимое внутри table_text_data, вы можете переписать код, например

{this.props.items.map(item =>{ 
   return(
<ul>
<li> page_num={item.page_num} </li>
<li> status:{item.status}</li>
</ul>
   if(item ==='table_text_data'){
      {item.table_text_data.map((c,i)=>( 
          return (
 <ul><li>bottom={c.bottom}</li>
           <li>height={c.height}</li>
           <li>left={c.right}</li>
           <li>right={c.left}</li>
           <li>text={c.text}</li></ul> 
))
}
)}
        </ul>
)})}
person sharun k k    schedule 26.10.2020
comment
не сработало. нельзя указать оператор if. любые другие решения, если это возможно? - person sanjay srinivasa; 26.10.2020