我有兩個組成部分，即CollapsableCard和InnerParentCard。
InnerParentCard 是 CollapsableCard 的孩子，CollapsableCard 是主螢屏的孩子。
在主螢屏下，我有 CollapsableCard 的回傳組件。
<SalaryCardFlatList
data={allCardTitle}
keyExtractor={(item) => item.id}
renderItem={({ item }) => {
<CollapsibleCard
data={item.innerData}
formTitle={item["@TEUR"]}
tashlumBody={tashlumBody}
isTabularFormat={item.isTabularFormat}
isTitleText={item.isTitleText}
/>
}
下面是 CollapsableCard 的陣列渲染。
props.data.forEach((obj, objIndex) => {
innerArray = allInnerContent.map((keyName, index) => {
if (props.isTabularFormat) {
if (index === hebrewMonthArray.length - 1) {
return (
<DataTable.Cell style={styles.dataTableCell}>
<Text style={{ fontSize: 9 }}> {obj["@VALUE_SUM"]}</Text>
</DataTable.Cell>
);
} else {
if (obj.hasOwnProperty(`@VALUE${index 1}`)) {
return (
<DataTable.Cell style={styles.dataTableCell}>
<Entypo name="check" size={20} color="#1F75FE" />
</DataTable.Cell>
);
} else {
return (
<DataTable.Cell style={styles.dataTableCell}></DataTable.Cell>
);
}
}
}
//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 <Text style={styleVar}>{obj[keyName]}</Text>;
} else return <Text style={styleValue}>{obj[keyName]}</Text>;
});
在 CollapsableCard 組件下，我有 InnerParentCard。
<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}
></InnerParentCard>
下面是 InnerParentCard 的渲染。
allInnerContent.forEach((tashlum, index) => {
const styleVar =
index === 0
? styles.value
: index === 1
? styles.innerValue
: styles.titleValue;
const styleValue =
index === 0 ? styles.firstIndexvalue : styles.LastIndexValue;
{
!props.isKav1Present
? allTashlum.push(
<TashlumView>
<Text style={styleVar}>{props.allTashlumValue[tashlum]}</Text>
</TashlumView>
)
: allTashlum.push(
<TashlumView>
<Text style={styleValue}>{props.allTashlumValue[tashlum]}</Text>
</TashlumView>
);
}
});
對于這兩個組件，它顯示了兩個子組件的警告。
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`.
如何將 key prop 傳遞給 CollapsableCard 和 InnerParentCard 組件？
uj5u.com熱心網友回復：
對于任何一個組件正在渲染的每個陣列，它們仍然需要為每個被渲染的映射元素包含一個唯一的 React 鍵屬性。
可折疊卡片
props.data.forEach((obj, objIndex) => {
innerArray = allInnerContent.map((keyName, index) => {
if (props.isTabularFormat) {
if (index === hebrewMonthArray.length - 1) {
return (
<DataTable.Cell
key={/* some unique key value here */}
style={styles.dataTableCell}
>
<Text style={{ fontSize: 9 }}> {obj["@VALUE_SUM"]}</Text>
</DataTable.Cell>
);
} else {
if (obj.hasOwnProperty(`@VALUE${index 1}`)) {
return (
<DataTable.Cell
key={/* some unique key value here */}
style={styles.dataTableCell}
>
<Entypo name="check" size={20} color="#1F75FE" />
</DataTable.Cell>
);
} else {
return (
<DataTable.Cell
key={/* some unique key value here */}
style={styles.dataTableCell}
/>
);
}
}
}
//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 (
<Text
key={/* some unique key value here */}
style={!props.isTitleText ? styleVar : styleValue}
>
{obj[keyName]}
</Text>
);
});
內部母卡
allInnerContent.forEach((tashlum, index) => {
...
allTashlum.push(
<TashlumView key={/* some unique key value here */}>
<Text style={!props.isKav1Present ? styleVar : styleValue}>
{props.allTashlumValue[tashlum]}
</Text>
</TashlumView>
);
...
});
的key={/* some unique key value here */}罐，并且應該是固有的映射元件，即，任何唯一密鑰值的id或任何獨特的屬性，或其組合特性，只要它是即時的兄弟姐妹中是獨特的。避免隨機鍵和索引。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/376815.html