Reactjs 赢得评论'；你不能用新道具重新装填吗？

我在更新一些道具方面遇到了一些问题。我的应用程序有一个帖子（listItems）的提要屏幕（listView）。我也在使用redux

如果我点击一篇文章，它将带我进入评论屏幕。当它这样做时，它通过listItem的道具，并完全显示文章文本、图像、作者等

在commentScreen中，如果我单击内容（图像/文本），它将引导我进入editPost屏幕。执行此操作时，它会获取道具（image/text/uid）并填充textInput和image字段，以便用户可以对其进行编辑。完成后，我可以单击saveEdit按钮。这将获取文本、图像和uid，并通过操作更新firebase中的帖子。它还会弹出（）屏幕并将我带回commentsScreen

问题是，编辑后的帖子看不见。原始文本/图像仍然存在。如果我查看Firebase控制台，我可以看到编辑已保存

如果我弹出评论屏幕并返回提要，它是最新的。我可以看到这篇文章已被成功编辑。如果我再次点击帖子，它会带我回到评论屏幕，显示更新的帖子

我猜这是因为提要中的listView本身正在监视帖子的firebase引用？因此，在我重新访问提要以便更新之前，评论屏幕中的帖子不会改变

我怎样才能解决这个问题？我是否需要用componentWillUpdate或componentWillReceiveProps或其他什么做些什么

我曾尝试在不同的点向firebase发出不同的get请求，但迄今为止没有成功

这是我的提要：

class FeedComponent extends Component {
  componentWillMount() {
    this.props.postsFetch();

    this.createDataSource(this.props);
  }

  componentWillReceiveProps(nextProps) {
    // nextProps are the next set of props that this component
    // will be rendered with
    // this.props is still the old set of props
    this.createDataSource(nextProps);
  }

  createDataSource({ posts }) {
    const ds = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 !== r2
    });

    this.dataSource = ds.cloneWithRows(posts);
  }

  renderRow(posts) {
    return <PostListItem posts={posts} />;
  }

  render() {
    return (
        <ListView
          {...this.props}
          enableEmptySections
          removeClippedSubviews={false}
          dataSource={this.dataSource}
          renderRow={this.renderRow}
          style={{ backgroundColor: '#D8D8D8' }}
        />
      );
    }
  }


const mapStateToProps = state => {
  const posts = _.map(state.feed, (val, uid) => {
    return { ...val, uid };
  });

  return { posts };
};

export default connect(mapStateToProps, { postsFetch })(FeedComponent);

并将其发送到减速器

以下是列表项：

@withNavigation
class PostItem extends Component {
  state = {
    result: ''
  };

  goToComments() {
    this.props.navigation
     .getNavigator('root')
     .push(Router.getRoute('comments', { posts: this.props.posts }));
  }

  render() {
    const {
      text,
      author,
      vote_count,
      comment_count,
      image,
      created_at
    } = this.props.posts;

    const fromNow = moment(created_at).fromNow();

    return (
      <Card style={styles.cardStyle}>

        <TouchableOpacity onPress={this.goToComments.bind(this)}>
         //Text/Image component using props
        </TouchableOpacity>
      </Card>
    );
  }
}

@withNavigation
类PostItem扩展组件{
状态={
结果：“”
};
goToComments（）{
这是导航
.getNavigator（'根'）
.push（Router.getRoute（'comments'，{posts:this.props.posts}））；
}
render（）{
常数{
文本，
作者
计票，
评论(u count),，
形象,，
创建于
}=此.props.posts；
const fromNow=力矩（在.fromNow（）处创建）；
返回(
//使用道具的文本/图像组件
);
}
}

在那里，你可以看到有一个goToComments函数，它传递post道具

这是评论屏幕：

class Comments extends Component {
  render() {
    return (
      <View style={{ flex: 1 }}> 
         <PostSection
            post={this.props.route.params.posts}
          />
      </View>
    );
  }
}

类注释扩展组件{
render（）{
返回(
);
}
}

这会将道具输入postSection组件，该组件在评论屏幕中显示文章。在我进入编辑屏幕、进行编辑并返回后，此项不会更新：

@withNavigation
class PostSection extends Component {
  editPost() {
    this.props.startEdit(this.props.post);

    this.props.navigation
     .getNavigator('root')
     .push(Router.getRoute('editPost'));
  }

  renderImage(image) {
    if (image) {
      return (
        <View style={styles.imageContainer}>
          <Image
            style={styles.imageSize}
            source={{ uri: image }}
          />
        </View>
      );
    }
  }

  renderText(text) {
    if (text) {
      return <PostText text={text} />;
    }
  }

  renderPost(text, image) {
    // if (POST BELONGS TO CURRENT USER) {
        return (
          <TouchableOpacity onPress={this.editPost.bind(this)}>
            {this.renderText(text)}

            {this.renderImage(image)}
          </TouchableOpacity>
        );
  }

  render() {
    const {
      text,
      author,
      vote_count,
      comment_count,
      image,
      created_at
    } = this.props.post;

    const fromNow = moment(created_at).fromNow();

    return (
      <View>
        <TopBar
          author={author}
          fromNow={fromNow}
        />

        {this.renderPost(text, image)}

        <BottomBar
          voteCount={vote_count}
          commentCount={comment_count}
        />
      </View>
    );
  }
}

export default connect(null, { startEdit })(PostSection);

@withNavigation
类PostSection扩展组件{
社论（{
this.props.startEdit（this.props.post）；
这是导航
.getNavigator（'根'）
.push（Router.getRoute（'editPost'）；
}
渲染（图像）{
如果（图像）{
返回(
);
}
}
renderText（文本）{
如果（文本）{
返回；
}
}
renderPost（文本、图像）{
//如果（帖子属于当前用户）{
返回(
{this.renderText（text）}
{this.renderImage（图像）}
);
}
render（）{
常数{
文本，
作者
计票，
评论(u count),，
形象,，
创建于
}=this.props.post；
const fromNow=力矩（在.fromNow（）处创建）；
返回(
{this.renderPost（文本、图像）}
);
}
}
导出默认连接（null，{startEdit}）（PostSection）；

你能发布你的代码吗？抱歉，太多了，我应该发布什么？添加了@Luke101！组件似乎没有重新渲染。更改

此。数据源将不会重新渲染组件。请尝试将数据源置于组件的状态。
@withNavigation
class PostSection extends Component {
  editPost() {
    this.props.startEdit(this.props.post);

    this.props.navigation
     .getNavigator('root')
     .push(Router.getRoute('editPost'));
  }

  renderImage(image) {
    if (image) {
      return (
        <View style={styles.imageContainer}>
          <Image
            style={styles.imageSize}
            source={{ uri: image }}
          />
        </View>
      );
    }
  }

  renderText(text) {
    if (text) {
      return <PostText text={text} />;
    }
  }

  renderPost(text, image) {
    // if (POST BELONGS TO CURRENT USER) {
        return (
          <TouchableOpacity onPress={this.editPost.bind(this)}>
            {this.renderText(text)}

            {this.renderImage(image)}
          </TouchableOpacity>
        );
  }

  render() {
    const {
      text,
      author,
      vote_count,
      comment_count,
      image,
      created_at
    } = this.props.post;

    const fromNow = moment(created_at).fromNow();

    return (
      <View>
        <TopBar
          author={author}
          fromNow={fromNow}
        />

        {this.renderPost(text, image)}

        <BottomBar
          voteCount={vote_count}
          commentCount={comment_count}
        />
      </View>
    );
  }
}

export default connect(null, { startEdit })(PostSection);