Question

我正在为我的JSON数据使用状态变量。我收到以下错误：undefined is not an object (evaluating posts[0])。尽管posts是一个数组，但typeof(posts)是object。我可以使用普通的JSON对象进行任意深入的研究，但是一旦我将数据作为状态变量进行访问，React Native就会出错。代码：

  const [posts, setPosts] = useState([]);
  var dataRetrieved = false;

  const getData = async () => {
    await fetchPosts();
  }

  useEffect(() => {
    if (!dataRetrieved) {
      dataRetrieved = true;
      getData();
    }
  }, []);

  const fetchPosts = useCallback(async () => {
    fetch('https://www.generic.com/api/feed', {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        page: 1,
      })
    })
    .then((response)=> response.json())
    .then((json)=> {
      setPosts(json.posts);
    })
    .catch((error)=> {
      console.log(error);
    })
  });

  return (
    <FlatList contentContainerStyle={styles.gridWrap}
      ListHeaderComponent={
      <>
        <Text>
          {JSON.stringify(posts[0])}
        </Text>
        ...

Answer 1

这是问题

 <Text>
      {JSON.stringify(posts[0])}
    </Text>

这发生在您的第一个渲染中，您的useEffect尚未运行，并且未从api加载数组。第一次调用render时，数组为空，访问第一个元素将引发错误。

您可以做的修复是显示ActivityIndicator

喜欢

If(posts.length===0)
 return <ActivityIndicator/>

或者您可以在渲染器内部比较数组和渲染器的长度。

Answer 2

发生这种情况是因为在post变量加载数据之前调用了render方法。

您可以通过检查数据是否存在来通过条件渲染来解决它。

{ posts && posts.length
  <Text>
   {JSON.stringify(posts[0])}
 </Text>
}

它将检查帖子是否未定义，如果不是，则呈现文本组件

useState和JSON对象数组，未定义不是对象

2 个答案: