Question

我不确定为什么会发生此错误。我一直试图弄清楚，但不知道如何。关于我的代码的唯一新内容是我正在使用react挂钩并声明了一个名为allUsers的状态变量。

从'react'导入React，{useState，useEffect}; 从“ aws-amplify”导入{API，graphqlOperation}


  const [allUsers, setAllUsers] = useState([]);

  listQuery = async () => {
    const allUsers = await API.graphql(graphqlOperation(listUsers));
    setAllUsers(allUsers);
    console.log(JSON.stringify(allUsers, null, 2));

  };

  useEffect(() => {
    listQuery();
  },[]);

  keyExtractor = (item, index) => index.toString()

  renderItem = ({ item }) => (
    <ListItem
      username={item.username}
    />
  )
    return (
      <FlatList
        keyExtractor={this.keyExtractor}
        data={allUsers}
        renderItem={this.renderItem}
      />
    )


}

Answer 1

关于renderItem函数。

您正在将一个项目传递给此函数，并且在FlatList中使用它时，您只是在调用它而没有传递任何项目。应该是这样的

document.getElementsByClassName("blm-icon-grid")[0].parentElement

此外，在使用功能组件时，我个人倾向于将所有方法编写为$(".blm-icon-grid")[0].parentElement，然后在没有任何return ( <FlatList data={allUsers} keyExtractor={this.keyExtractor} renderItem={({item}) => <this.renderItem item={item}/>} /> )的情况下调用它们。如果您决定执行此操作，请注意您的const函数将没有this，并且必须大写首字母renderItem。

试图获取超出范围索引NaN的帧反应本机错误

1 个答案: