Компонент React Native отображается в веб-браузере, но не на iOS - PullRequest
Новая
       46

Компонент React Native отображается в веб-браузере, но не на iOS

0 голосов
/ 01 августа 2020

Я создаю простое приложение для чтения json из поддельного json api. Когда я запускаю его в веб-браузере, он показывает эту ошибку:

Failed child context type: Invalid child context virtualizedCell.cellKey of type число supplied to CellRenderer , expected string .

Список из API по-прежнему отображается правильно, несмотря на ошибку. На iOS список вообще не отображается. Ошибка, по-видимому, вызвана KeyExtractor в FlatList. Я следую примеру из docs . JSON кажется достаточно похожим по структуре, поэтому я не понимаю, почему поле id работает в этом примере, но не в этом.

На самом деле я не уверен, вызывает ли эта ошибка его отображение в iOS Симулятор, но других ошибок в консоли нет. Все еще работает нормально работает в Chrome.

Родитель: 

  const [isLoading, setLoading] = React.useState(true);
  const [data, setData] = React.useState([]);

  React.useEffect(() => {
    const abortController = new AbortController();
    const signal = abortController.signal;
    fetch("https://jsonplaceholder.typicode.com/posts", { signal: signal })
      .then((response) => response.json())
      .then((json) => setData(json))
      .catch((error) => console.error(error))
      .finally(() => setLoading(false));

    return function cleanup() {
      abortController.abort();
    };
  }, []);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Tab Mars One</Text>
      <View
        style={styles.separator}
        lightColor="#eee"
        darkColor="rgba(255,255,255,0.1)"
      />
      {isLoading ? (
        <ActivityIndicator />
      ) : (
        <FlatList
          data={data}
          keyExtractor={({ id }, index) => id }
          renderItem={({ item }) => <Post item={item} />}
        />
      )}
    </View>
  );
}

Ребенок: 


const Post: React.FC<Item> = ({item}) => {
  return (
    <TouchableOpacity>
      <View style={styles.container}>
        <Text>{item.title}</Text>
      </View>
    </TouchableOpacity>
  );
};
...