Как обновить один элемент в FlatList в React Native?

не поймите меня неправильно, ответ @ShubhnikSingh действительно помог, но я отказался от него, потому что нашел лучшее решение этого вопроса, давно, и, наконец, я вспомнил опубликовать его здесь.

предположим, что мой элемент post содержит следующие свойства:

{
    postId: "-L84e-aHwBedm1FHhcqv",
    date: 1525566855,
    message: "My Post",
    uid: "52YgRFw4jWhYL5ulK11slBv7e583",
    liked: false,
    likeCount: 0,
    commentCount: 0
}

здесь liked представляет, понравился ли пользователю этот пост, который определит цвет кнопки" Нравится " (по умолчанию он серый, но красный, если liked == true)

затем сделайте "Post" a Component и сделать это в FlatList. (Здесь, не используйте PureComponent, потому что PureComponent не позволяет переопределить shouldComponentUpdate функция, и это важно по причине, указанной ниже)

class Post extends Component {
    constructor(props) {
        super(props)
        this.state = {
            postId: '',
            date: new Date(),
            message: '',
            uid: '',
            liked: false,
            likeCount: 0,
            commentCount: 0
        }
    }

    // Initialize the states
    componentWillMount() {
        const { postId, date, message, uid, liked,
            likeCount, commentCount } = this.props

        this.setState({ postId, date, message,
            uid, liked, likeCount, commentCount })
    }

    componentWillReceiveProps(nextProps) {
        const { postId, date, message, uid, liked,
            likeCount, commentCount } = nextProps

        this.setState({ postId, date, message,
            uid, liked, likeCount, commentCount })
    }

    // This determines whether a rendered post should get updated
    // Look at the states here, what could be changing as time goes by?
    // Only 2 properties: "liked" and "likeCount", if the person seeing
    // this post ever presses the "like" button
    shouldComponentUpdate(nextProps, nextState) {
        const { liked, likeCount } = nextState
        const { liked: oldLiked, likeCount: oldLikeCount } = this.state

        // If "liked" or "likeCount" is different, then update
        return liked !== oldLiked || likeCount !== oldLikeCount
    }

    render() {
        return(
            <View>
                ...    // render other properties
                // render the "like" button
                // "onLikePost" is a function passed down to this component
                <TouchableOpacity
                    onPress={() => this.props.onLikePost({ postId: this.state.postId })}
                >
                    <Icon
                        name='heart'
                        color={this.state.liked ? "gray" : "red"}
                    />
                </TouchableOpacity>
            </View>
        )
    }
}

затем, в другом месте, например, на экране, где вы рендерите свои сообщения, скажите MainScreen.js:

class MainScreen extends Component {
    constructor(props) {
        super(props)
        this.state = {
            posts: {}
            ... // Other states
        }

        // As you can see, we are not making "posts" an array, instead
        // we make it a json object, because, when you want to access
        // a specific post by its "postId", you won't have to iterate
        // through the whole array, you can just call "posts[postId]"
        // to access it immediately:
        // "posts": {
        //     "<post_id_1>": { "message": "", "uid": "", ... },
        //     "<post_id_2>": { "message": "", "uid": "", ... },
        //     "<post_id_3>": { "message": "", "uid": "", ... }
        // }
        // "FlatList" takes array only, therefore, you can just use "lodash":
        // _.values(this.state.posts)

        this.renderItem = this.renderItem.bind(this)
    }

    renderItem({ item }) {
        // Call the custom component you wrote here and pass all props

        const { date, message, uid, postId, ... } = item
        return (
            <Post
                date={date}
                message={message}
                uid={uid}
                ...
                onPressLike={this.onLikePost}
            />
        )
    }

    onLikePost({ postId }) {
        let post = this.state.posts[postId]
        const { liked, likeCount } = post

        const newPost = {
            ...post,
            liked: !liked,
            likeCount: liked ? likeCount - 1 : likeCount + 1
        }

        this.setState({
            posts: {
                ...this.state.posts,
                [postId]: newPost
            }
        })
    }

    render() {
        <View style={{ flex: 1 }}>
            <FlatList
                data={_.value(this.state.posts)}
                renderItem={this.renderItem}
                keyExtractor={({ item }) => item.postId}
            />
        </View>
    }
}

вот как вы обновляете один элемент в FlatList, в основном, шаги:

1. напишите пользовательский компонент для рендеринга каждого пункт в "FlatList"

2. переопределить функцию "componentWillReceiveProps"

3. переопределите функцию "shouldComponentUpdate", чтобы сообщить компоненту, когда обновлять

4. обработайте функцию изменения в Родительском компоненте и передайте вниз каждому ребенку