Question

我正在将一个galleryReload道具从UploadImages传递给DisplayImages，以便在上传新文件后重新获取文件列表。

我无法让DisplayImages对父级的状态更改运行它的getImages操作，而不会导致无限循环。

class UploadImage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      galleryReload: false
    };
...
// in render
<DisplayImages galleryReload={this.state.galleryReload} />

在DisplayImages中，我可以首先显示图像：

//works fine on first load 
componentWillMount() {
    this.props.getImages(this.props.gallery);
    }
  }

我确实无法弄清楚如何在上传文件后再次运行this.props.getImages（this.props.gallery）。

上传完成后，我尝试设置{galleryReload：true}的状态（在父级中），如下所示：

//onUploadFinished
this.setState((prevState, props) => ({
  galleryReload: true
}));

并使用componentWillUpdate和其他生命周期方法在child中再次获取结果，但我不断进入无限循环的获取。

以下是我在各种生命周期方法中添加内容然后停止进一步提取直到下一次上传完成的示例：

  if (this.props.galleryReload) {
      this.props.getImages(this.props.gallery);
      this.setState((prevState, props) => ({
        galleryReload: false
      }));
    }

如何在图片上传后重新调用getImages一次？

Answer 1

我意识到在学习反应和减少的同时，我让国家感到困惑。我没有在父母中设置redux状态，而是在本地状态。因此，要从子组件重置父组件的本地状态，我需要在父级中使用回调函数来设置galleryReload的状态，并将其作为prop传递给子组件。

在我的父母中我添加了功能：

  resetGalleryReload() {
    this.setState({
      galleryReload: false
    });
  }

我也设置了父构造函数

this.resetGalleryReload = this.resetGalleryReload.bind(this);

然后我发送给子组件作为支柱，如此

    <DisplayImages
      galleryReload={this.state.galleryReload}
      resetReloadGallery={this.resetGalleryReload}
    />

最后，我通过这个很好的阅读教育自己使用生命周期方法： https://developmentarc.gitbooks.io/react-indepth/content/life_cycle/introduction.html

所以我在DisplayImages组件中创建了这个

  componentDidUpdate(prevProps, prevState) {
    let val = this.props.galleryReload;
    if (val) {
      this.props.getImages(this.props.gallery);
      this.props.resetReloadGallery();
    }
  }

我

React-redux：在父状态更改

1 个答案: