Question

我试着根据父状态更新孩子。

在父母：

<ImageGallery id={this.state.id} images={this.state.images} />

在孩子身上：

  render(){
    console.log("Rendering.............. gallery ");
    console.log(this.props.images);
    var images =  this.props.images.map(function(image, i){
      return (
       <Image key={image.id} source={image.source} style={{width: 400, height: 400}}></Image>
      );
    });

    console.log("Array of images to render: => ");
    console.log(images);
    return (
      <View>{images}</View>
    );
  }

但是渲染只被调用一次，因为原始状态为空，数据在父组件上的数据被提取。

编辑回答问题

如何更新父组件的状态以及您希望如何更新＆gt; child？ - havenchyk

因为孩子正在引用该状态：

//Here
images={this.state.images}

编辑2

这是我的组件安装：

1-请求图像对象列表 2-然后将这些图像作为blob 3-使用base64显示图像 4-创建要在子对象上使用的Source对象 5-改变状态

async componentDidMount() {
    try{
      let response = await API.get(`communities/${this.state.id}/community-pictures`);

      let json = await response.json();

      if (!response.ok) {
        throw json;
      }

      let images = json.data;
      let newImages = [];

      images.forEach(async (image) => {
        let response = await API.request_blob(`communities/${this.state.id}/community-pictures/${image.id}/view`);
        let data = await response.base64();

        let type = response.respInfo.headers['Content-Type'];
        let imageUri = `data:${type};base64,` + data;

        let source = {uri: imageUri, scale: 1};

        newImages.push(Object.assign(image, {source: source}));
      });

      this.setState({
        images: newImages
      });

      console.log("Changing images!!");
      console.log(this.state);

    } catch (json) {
      // Surppressing this error
    }
  }

您可以查看孩子的渲染。它使用 this.props.images 来安装屏幕。但不行。家长会更改其状态，且孩子不会更新。

EDIT SUPER WIERD 伙计们，我发现了一些非常奇怪的东西。我在componentDidMount上放了一些console.log来查看新状态。检查OUT打印的是什么：

但是，当我打开对象以查看数组时，请查看它：

WOW !!什么是hapennin？！

Answer 1

通过setState(state)更改组件的状态后，调用当前组件的重新呈现，因为如果组件的状态不等于下一个状态，则方法shouldComponentUpdate的默认实现将返回true。您可以阅读更多相关信息here。

因此，您的组件已更新，并且调用了render()方法。接下来反应称为子元素的shouldComponentUpdate。

有一个如何反应渲染元素的例子。

vDOMEq表示呈现的React元素是等效还是否。 There是关于它的文档。

因此，当您更新子组件SCU的道具时，返回false，因此不需要重新渲染。怎么能避免这个？只需自己实施SCU。

shouldComponentUpdate(nextProps, nextState) {
   nextProps.propToChange !== this.props.propToChange
}

请记住不要改变你的道具，因为如果你愿意 - 相等的检查将返回false（因为refs是相同的），你会得到一些意想不到的错误。

Answer 2

问题是images.forEach(async (image) => {正在执行async。

因此，当React要检查它是否应该渲染时，它会比较一个空数组并且什么也不渲染。

然后，这些异步调用完成，当您更改同一引用newImages的内容时，您的console.log更改。

解决方案是删除async forEach，你可以将所有内容放在异步函数中并调用如下：

let images = json.data;
let newImages = [];

for (int index = 0; index < images.length; images++) {
    let img = await fetch(images[index]);
    newImages.push(img);
}

反应 - 更新孩子

2 个答案: