Блог

Я использую собственный плоский список react для визуализации элементов магазина. возвращение(

 lt;View style={styles.mainView}gt;  lt;ImageBackground  source={selectScreenBackgroundURL}  resizeMode="cover"  style={styles.backgroundImage}  gt;  lt;View style={[styles.overlay]} /gt;  lt;View style={styles.headerPadding}gt;  lt;FlatList  data={listStore}  keyExtractor={({ id }, index) =gt; id}  //keyExtractor={(item) =gt; item.Stores}  //keyExtractor={(item) =gt; item['id']}  numColumns={ColumnPlatform()}  renderItem={({ item }) =gt; (  lt;View  style={styles.brandListItem}  // style={lll.locker}  gt;  lt;Pressable  style={[  antiCannotRead_includes(accessibleStores, item['Stores'])  ? styles.brandButton  : styles.brandButtonlocked,  ]}  // style={lll.locker}  onPress={() =gt; {  savepages("tableName", item['Stores']);  setAccess(true);  }}  gt;  {item['logo'] ? (  lt;Image  source={{  uri: item['logo'],  }}  style={{  width: 110,  height: 35,  borderRadius: 8,  resizeMode: "contain",  alignSelf: "center",  }}  /gt;  ) : (  lt;Text style={styles.BrandButtonText}gt;{item['Stores']}lt;/Textgt;  )}  lt;/Pressablegt;  lt;/Viewgt;  )}  /gt;  lt;/Viewgt;  

Стиль кнопки определяется функцией, которая выполняет поиск, находится ли элемент flatlist.store в доступных для пользователя магазинах.

 function antiCannotRead_includes(searchinc: string, askinc: string) {  if (searchinc == undefined) {  return false;  } else {  return searchinc.includes(askinc);  }  }  

Извините за название. Я обнаружил ошибку, когда сервер неправильно реагирует, когда Wi-Fi был слабым, и я сделал дополнительный шаг, чтобы избежать этой ошибки, когда сервер не отвечает.

Таким образом, этот динамичный стиль хорошо работает на мобильных устройствах. Но в веб-части это вообще не работает. Он всегда возвращает стиль с фирменными кнопками. Табличное представление Веб-представление

Данные listStores являются:

 //list store data  const [listStore, setListStore] = useState([]);  //accessible store names  const [accessibleStores, setAccessibleStores] = useState("No Permission");   Array [  Object {  "Stores": "Dunaplex",  "id": "1",  "logo": "*******/back/assets/dunaplex.png",  },  Object {  "Stores": "Ninis Dream",  "id": "2",  "logo": "*******/back/assets/ninis_dream.png",  },  Object {  "Stores": "Weenywoody RS",  "id": "3",  "logo": "",  },  ]  

accessibleStores is a string like: Dunaplex|Ninis Dream

And also I couldn’t run keyExtractor correctly on this page. It always gives a warning: «Warning: Each child in a list should have a unique «key» prop.» I tried:

 keyExtractor={({ id }, index) =gt; id}  //keyExtractor={(item) =gt; item.Stores}  //keyExtractor={(item) =gt; item['id']}  

But none of them runs correctly. Maybe I’m neglecting something simple but couldn’t see it.

Is there any opinion?
Best wishes to all the developer community…