Блог

У меня есть два компонента, т. е. сворачиваемая карточка и внутренняя карта.

Карта InnerParentCard является дочерним элементом карты CollapsableCard, а карта CollapsableCard является дочерним элементом главного экрана.

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

 lt;SalaryCardFlatList  data={allCardTitle}  keyExtractor={(item) =gt; item.id}  renderItem={({ item }) =gt; { lt;CollapsibleCard    data={item.innerData}  formTitle={item["@TEUR"]}  tashlumBody={tashlumBody}  isTabularFormat={item.isTabularFormat}  isTitleText={item.isTitleText}  /gt; }  

ниже приведен рендеринг массива для сворачиваемой карты.

 props.data.forEach((obj, objIndex) =gt; {  innerArray = allInnerContent.map((keyName, index) =gt; {  if (props.isTabularFormat) {  if (index === hebrewMonthArray.length - 1) {  return (  lt;DataTable.Cell style={styles.dataTableCell}gt;  lt;Text style={{ fontSize: 9 }}gt; {obj["@VALUE_SUM"]}lt;/Textgt;  lt;/DataTable.Cellgt;  );  } else {  if (obj.hasOwnProperty(`@VALUE${index   1}`)) {  return (  lt;DataTable.Cell style={styles.dataTableCell}gt;  lt;Entypo name="check" size={20} color="#1F75FE" /gt;  lt;/DataTable.Cellgt;  );  } else {  return (  lt;DataTable.Cell style={styles.dataTableCell}gt;lt;/DataTable.Cellgt;  );  }  }  }  //NOTE:taken styleValue for aligning each index value of innerContain  const styleVar = index === 0 ? styles.value : styles.innerValue;  const styleValue =  index === 0  ? styles.firstIndexValue  : index === 1  ? styles.secondIndexvalue  : index === 2  ? styles.thirdIndexValue  : styles.innerValue;  if (!props.isTitleText) {  return lt;Text style={styleVar}gt;{obj[keyName]}lt;/Textgt;;  } else return lt;Text style={styleValue}gt;{obj[keyName]}lt;/Textgt;;  });   

В разделе компонент сворачиваемой карты у меня есть внутренняя карта.

 lt;InnerParentCard    tashlumList={props.tashlumList[`${objIndex   1}`]}  allTashlumValue={obj}  formBodyValue={props.formBody}  updateValue={updateValue}  isHelpMessage={helpMessage}  isSubTitleText={subTitleText}  isKav1Present={props.isKav1Present}  isTotalAmount={totalAmount}  allTashlumSection={props.allTashlumArray[`${objIndex}`]}  allChildSection={props.allTashlumChildSection[`${objIndex}`]}  isHefAmount={hefAmount}  isAhuzAmount={ahuzAmount}  isFromDate={fromDate}  isToDate={toDate}  gt;lt;/InnerParentCardgt;  

ниже приведен рендеринг для внутренней карты.

 allInnerContent.forEach((tashlum, index) =gt; {  const styleVar =  index === 0  ? styles.value  : index === 1  ? styles.innerValue  : styles.titleValue;  const styleValue =  index === 0 ? styles.firstIndexvalue : styles.LastIndexValue;  {  !props.isKav1Present  ? allTashlum.push(  lt;TashlumViewgt;  lt;Text style={styleVar}gt;{props.allTashlumValue[tashlum]}lt;/Textgt;  lt;/TashlumViewgt;  )  : allTashlum.push(  lt;TashlumViewgt;  lt;Text style={styleValue}gt;{props.allTashlumValue[tashlum]}lt;/Textgt;  lt;/TashlumViewgt;  );  }  });  

для этих двух компонентов он показывает предупреждения для обоих дочерних компонентов.

 Warning: Each child in a list should have a unique "key" prop.  Check the render method of `CollapsibleCard`.  

 Warning: Each child in a list should have a unique "key" prop.  Check the render method of `InnerParentCard`.  

Как передать ключевую поддержку компонентам CollapsableCard и InnerParentCard?

Для каждого массива, который рендерит любой компонент, им все равно необходимо включить уникальный ключ React для каждого отображаемого отображаемого элемента.

Складывающаяся карта

 props.data.forEach((obj, objIndex) =gt; {  innerArray = allInnerContent.map((keyName, index) =gt; {  if (props.isTabularFormat) {  if (index === hebrewMonthArray.length - 1) {  return (  lt;DataTable.Cell  key={/* some unique key value here */}  style={styles.dataTableCell}  gt;  lt;Text style={{ fontSize: 9 }}gt; {obj["@VALUE_SUM"]}lt;/Textgt;  lt;/DataTable.Cellgt;  );  } else {  if (obj.hasOwnProperty(`@VALUE${index   1}`)) {  return (  lt;DataTable.Cell  key={/* some unique key value here */}  style={styles.dataTableCell}  gt;  lt;Entypo name="check" size={20} color="#1F75FE" /gt;  lt;/DataTable.Cellgt;  );  } else {  return (  lt;DataTable.Cell  key={/* some unique key value here */}  style={styles.dataTableCell}  /gt;  );  }  }  }  //NOTE:taken styleValue for aligning each index value of innerContain  const styleVar = index === 0 ? styles.value : styles.innerValue;  const styleValue =  index === 0  ? styles.firstIndexValue  : index === 1  ? styles.secondIndexvalue  : index === 2  ? styles.thirdIndexValue  : styles.innerValue;   return (  lt;Text  key={/* some unique key value here */}  style={!props.isTitleText ? styleVar : styleValue}  gt;  {obj[keyName]}  lt;/Textgt;  );  });  

Карточка внутреннего родителя

 allInnerContent.forEach((tashlum, index) =gt; {  ...   allTashlum.push(  lt;TashlumView key={/* some unique key value here */}gt;  lt;Text style={!props.isKav1Present ? styleVar : styleValue}gt;  {props.allTashlumValue[tashlum]}  lt;/Textgt;  lt;/TashlumViewgt;  );  ... });  

Это key={/* some unique key value here */} может и должно быть любое уникальное ключевое значение, присущее отображаемому элементу, т. е. id любое уникальное свойство или комбинация свойств, если оно уникально среди ближайших родственников. Избегайте случайных ключей и индекса.