Question

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

如果我点击帖子，它会将我带到评论界面。当它这样做时，它会通过listItem的道具并完全显示帖子文本，图像，作者等。

在评论屏幕中，如果我点击内容（图片/文字），它会带我进入editPost屏幕。当它这样做时，它采用道具（图像/文本/ uid）并填充textInput和image字段，以便用户可以编辑它。完成后，我可以单击saveEdit按钮。这将采用text，image和uid并通过动作更新firebase中的帖子。它也会弹出（）屏幕并带我回到commentsScreen。

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

如果我弹出commentsScreen并返回到Feed，它就是最新的。我可以看到该帖子已成功编辑。如果我再次点击该帖子，它会将我带回评论屏幕，显示更新的帖子。

我想这是因为Feed本身的listView正在观看帖子的firebase引用？因此，commentScreen中的帖子不会更改，直到我重新访问Feed以便它可以更新？

我该如何解决这个问题？我是否需要使用componentWillUpdate或componentWillReceiveProps做某事？

我尝试在不同的点向firebase发出不同的get请求，但到目前为止我还没有成功。

这是我的Feed：

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);

然后执行此操作：

export const postsFetch = () => {
  return (dispatch) => {
    firebase.database().ref('/social/posts')
      .on('value', snapshot => {
          dispatch({ type: POSTS_FETCH_SUCCESS, payload: snapshot.val() });
      });
  };
};

并将其发送给reducer。

这是listItem：

@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>
    );
  }
}

在那里，你可以看到有一个goToComments功能，它通过帖子道具

这是评论界：

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

这会将props提供给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);

评论不会重新加载新道具？

0 个答案: