Question

我正在构建一个简单的应用程序，以从假json API中读取json。当我在网络浏览器中运行它时，它显示此错误：

Failed child context type: Invalid child context virtualizedCell.cellKey of type数字supplied to CellRenderer , expected 字符串.

尽管有错误，但api列表仍然正确显示。在iOS上，该列表完全不呈现。该错误似乎是由FlatList中的KeyExtractor引起的。我正在按照docs中的示例进行操作。 JSON在结构上似乎足够相似，我看不出为什么id字段在该示例中起作用，但在此示例中不起作用。

我实际上不确定此错误是否导致它无法在iOS Simulator中呈现，但控制台中没有其他错误。在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>
  );
};

React Native组件在Web浏览器中显示但不在iOS上显示

0 个答案: