在 setState 和 API 结果之后取消定义数组

Question

我开始使用 react-native。

我正在尝试创建 ImageGallery。拥有此图库的步骤之一是在结果为 API.

的状态下启动数组

我在名为 "images"
我调用 API --> console.log，我看到的结果是正确的
我想设置我的数组 "images"
我想读取我的数组"images"

这是我的代码

import React from 'react';
import {
    View,
    Image,
    FlatList
} from 'react-native';

export default class TestGallery extends React.Component {

constructor(props) {
    super(props);
    this.state = {
        error: null,
        images: []
    };
}

componentDidMount() {
    fetch("*************************************")
        .then(res => res.json())
        .then(res => console.log(res))
        .then((result) => {
                this.setState({
                    images: result.images
                });
            },
            (error) => {
                this.setState({
                    error
                });
            }
        )
}

render() {
    console.log('Step 3 : RENDER')

    console.log(this.state.images)

    return (
        <View style={{ height: 200, width: 200 }}>
            <FlatList
                data={this.state.images}
                renderItem={({ item }) => (
                    <Image
                        style={{ height: 200, width: 200, backgroundColor: 'red' }}
                        source={this.state.images}
                    />
                )}
            />
        </View>

    )
}
}

控制台：

Step 3 : RENDER
Array []
Array [
  "photo(3).jpg",
  "photo(7).jpg",
  "photo(2).jpg",
  "photo(8).jpg",
  "photo(14).jpg",
  "photo(12).jpg",
  "photo(6).jpg",
  "photo(15).jpg",
  "photo(10).jpg",
  "photo(9).jpg",
  "photo(5).jpg",
  "photo(1).jpg",
  "photo(11).jpg",
  "photo(13).jpg",
  "photo(4).jpg",
]

[Unhandled promise rejection: TypeError: undefined is not an object (evaluating 'result.images')]

有人可以帮助我吗？为什么我不能设置我的数组 "Images"

Answer 1

正如您在 console.log 中看到的那样，您的响应已经是一组图像（名称而不是 URL 看起来的图像）。您需要一个带有 images 键的对象。好吧，您必须为此调整 API 端点。要将结果数组放入您的状态，您可以执行以下操作。

fetch(...)
.then(res => res.json())
.then(json => {
  console.log(json)
  this.setState({images: json})
})

您的图像不会使用此代码显示，因为您得到的是图像名称。当这些图像保存在您的 RN 项目中时，您必须使用 require 作为具有正确图像路径的图像源。但我很确定你想从 uri 渲染，所以你必须使用 uri 作为图像源，并对图像使用正确的 URL。
您需要使用 renderItem 函数中的 item 作为图像源，因为那将是 this.state.images 的一项。您将 this.state.images 中保存的整个数组传递给图像源。

你真的应该更仔细地阅读文档。图片：https://reactnative.dev/docs/image 平面列表：https://reactnative.dev/docs/flatlist.html

在 setState 和 API 结果之后取消定义数组

array undefine after a setState and an API result

state

setstate

react-native