Question

我正在构建一个React Native应用，并且试图使用列表中的多个相同组件。我有一个组件ListItem，它拥有自己的状态，其中包含一个名称。然后，我有一个MyList组件，该组件使用地图来渲染一堆ListItems。

我在ListItem中有一些异步函数可以为该特定项目提取图像，但是我遇到了一些交叉污染的问题，其中为一个ListItem提取图像会更改其他ListItems上的图像吗？不确定到底是怎么回事。

是否有办法“隔离”这些组件或重置状态，以使它们彼此独立？在每个的构造函数中，我都有

class ListItem extends Component {
    constructor(props) {
         super(props);
         this.state = {STATE STUFF HERE}
         this._functionThatPullsAsyncImages(); //this places an image url into the state
    }
    render(){RENDER STUFF HERE}

    _functionThatPullsAsyncImages = async() => {
        this.setState({coverImage : await getPlaylistImageURL(this.props.playlistId)}) 
    }

Answer 1

通常的做法是设置一个占位符图像，并触发一个异步调用以使用生命周期方法componentDidMount()而不是构造函数来加载该图像。像这样：

class ListItem extends Component {
    constructor(props) {
         super(props);
         this.state = {STATE STUFF HERE}
    }
    componentDidMount() {
        // 1. Set placeholder

        // 2. call async image loader
        this._functionThatPullsAsyncImages(); //this places an image url into the state
    }
    render(){RENDER STUFF HERE}

    _functionThatPullsAsyncImages = async() => {
        this.setState({coverImage : await getPlaylistImageURL(this.props.playlistId)}) 
    }

Answer 2

您好，谢谢您的帮助，我想出了这一点。

我的结果实际上在异步函数getPlaylistImageURL（）中被交叉污染了。我设置图像ID的变量之一未定义为const，这允许异步函数的不同实例覆盖它，并输入错误的ID。

一旦我解决了这个问题，一切都会解决。

React Native使用多个组件而不共享状态

2 个答案: