更新儿童状态变化的平面列表

Question

我有一个提供列表的新闻组件。

在该列表中有一个文本输入，其中包含显示文本的文本字段。

我在News.js有这个组件：

renderItem({item}) {
        return (
            <Post
                data={item}
                onPressLike={this.onLikePost}
                addLike={this.props.addLikesPost}
                email={this.props.email}
                postComment={this.props.postComment}
                removeLike={this.props.removeLikesPost}
                fullName={this.props.firstname + ' ' + this.props.lastname}
            />
        );
    }
                     <AnimatedFlatList
                                extraData={this.state}
                                data={_.values(this.props.posts)}
                                renderItem={this.renderItem.bind(this)}
                                keyExtractor={(item) => {
                                    // console.log("Item", item.value.id);
                                    return item.value.socialHash + "";
                                    }}
                                backgroundColor='#edeaea'
                                style={{ paddingBottom: 7,  }}

                            />

然后我在Post.js里面有这个：

class Post extends Component {
    constructor(props) {
        super(props);
        this.child = React.createRef();
        this.state = {
            title: '', 
            post: '', 
            likes: 0, 
            userLiked: 0, 
            first_name: '', 
            last_name: '',
            timestamp: null, 
            socialHash: 0, 
            comments: null, 
            id: null,
            isVisible: false,
            displayComments: false,
            typedComment: '',
            commentsText: '',
        };
    }

    onCommentPress() {
        this.props.data.value.comments[0].comments.push({
            poster: this.props.fullName,
            comment: this.state.typedComment,
            key: Math.random() * 10 + "",
            time_stamp: new Date()
        })
        this.setState({ commentsText: this.state.typedComment });
    }


    render() {
        return (
                <View >
                        <Text>{this.state.typedComment}</Text>
                        <View>
                                <Input 
                                onChangeText={(typedComment) => { 
                                    console.log("Changing Input", typedComment);
                                    this.setState({ typedComment }); 
                                }}
                                placeholder='Write a comment...'
                                />
                            <Button 
                                onPress={this.onCommentPress.bind(this)}>
                                <Icon name={"paper-plane"} size={20} />
                            </Button>

                        </View>
            </View>
            );
        }
    }


const mapStateToProps = (state) => {
    const { commentText } = state.misc;
    return {
        commentText
    };
};

// This helps us to bind our dispatch function to props
const mapDispatchToProps = dispatch =>
  bindActionCreators(
    {
      ...Games
    },
    dispatch
  );

export default connect(mapStateToProps, mapDispatchToProps)(Post);

描述你期望发生的事情：我希望post.js中的文本组件显示用户在输入框上输入的实时文本

Answer 1

您希望FlatList的“数据”获得更新视图“this.props.data”。

   this.props.data.value.comments[0].comments.push({
                poster: this.props.fullName,
                comment: this.state.typedComment,
                key: Math.random() * 10 + "",
                time_stamp: new Date()
            })

但道具是反应中的只读。 因此，您需要一个不同的解决方案来将您的状态传达给FlatList。 例如。 发送动作（通过reducer更改状态）或通过props或其他东西使用回调函数。