如何管理我的子组件状态数组？

Question

我是新手，所以请原谅我。我在理解状态时遇到问题，特别是儿童的状态。

目的：我正在尝试创建一个用户可以附加越来越多组件的表单——在本例中是图像。

会发生什么：用户附加 2 个或更多图像。用户尝试上传带有UploadButton 组件的图片，但两张图片相同。我相信这与共享相同状态的两个附加孩子有关。

问题：如何在不影响其他附加子项的情况下为每个附加子项赋予自己的图像？

class Page extends Component
  constructor (props) {
    super(props);

    this.state = { 
      id: '', 
      numChildren: 0,
      images: [],
    }
    this.onAddChild = this.onAddChild.bind(this);
  }

  showModal() {
    this.setState({
      numChildren: 0,
      images: [],
    });
  }

  renderModal() 
    const children = [];
    //Here's my array of child components
    for(var i = 0; i < this.state.numChildren; i += 1) {
        children.push(<this.ChildComponent key={i} />);
    }

    return (
      <ReactModal>
        <this.ParentComponent addChild={this.onAddChild}>
          {children}
        </this.ParentComponent>
      </ReactModal>
    )
  }

  onAddChild = () => {
    this.setState({
      numChildren: this.state.numChildren + 1
    })
  }

  ParentComponent = (props) => (
    <div>
      {props.children}
      <Button onClick={props.addChild}>Add Item</Button>
    </div>
  );

  ChildComponent = () => (
    <div>
      <UploadButton
        storage="menus"
        value={this.state.images}
        onUploadComplete={uri => this.setState({images: uri})}
      />
    </div>
  );
}

这是UploadButton的代码：

import React, { Component } from 'react';
import uuid from 'uuid';
import firebase from '../config/firebase';

class UploadButton extends Component {

  constructor(props) {
    super(props);

    this.state = {
      isUploading: false
    }
  }

  handleClick() {
    const input = document.createElement("INPUT");
    input.setAttribute("type", "file");
    input.setAttribute("accept", "image/gif, image/jpeg, image/png");
    input.addEventListener("change", ({target: {files: [file]}}) => this.uploadFile(file));
    input.click();
  }

  uploadFile(file) {
    console.log('F', file);
    const id = uuid.v4();
    this.setState({ isUploading: true })
    const metadata = {
      contentType: file.type
    };
    firebase.storage()
      .ref('friends')
      .child(id)
      .put(file, metadata)
      .then(({ downloadURL }) => {
        this.setState({ isUploading: false })
        console.log('Uploaded', downloadURL);
        this.props.onUploadComplete(downloadURL);
      })
      .catch(e => this.setState({ isUploading: false }));

  }

  render() {
    const { 
      props: {
        value,
        style = {},
        className = "image-upload-button",
      },
      state: {
        isUploading    
      }
    } = this;

    return (
      <div 
        onClick={() => this.handleClick()}
        className={className}
        style={{
          ...style,
          backgroundImage: `url("${this.props.value}")`,          
        }}>
        {isUploading ? "UPLOADING..." : !value ? 'No image' : ''}
      </div>
    );
  }

}


export default UploadButton;

我试图排除所有与我的问题无关的不必要代码，但如果我需要显示更多内容，请告诉我。

编辑：这是我的尝试，它不起作用：

//altered my children array to include a new prop
renderModal() {
  const children = [];
  for (var i = 0; i < this.state.numChildren; i += 1) {
    children.push(<this.ChildComponent imageSelect={this.onImageSelect} key={i} />);
  }
  //...
};

//my attempt to assign value and pass selected image back to images array
ChildComponent = () => (
  <div>
    <UploadButton
        storage="menus"
        value={uri => this.props.onImageSelect(uri)} //my greenness is really apparent here
        onUploadComplete={uri => this.setState({images: uri})}
    /> 
    //...
  </div>
);

//added this function to the class
onImageSelect(uri) {
  var el = this.state.images.concat(uri);
  this.setState({
    images: el
  })
}

我知道我没有正确访问 child 道具。这是迄今为止我处理过的最复杂的问题。感谢您的宝贵时间。

Answer 1

当您在 Child / Parent 组件中写入this.state 时，您实际上是在访问 Page 的状态。现在，我建议您像这样将孩子的索引传递给孩子

children.push(<this.ChildComponent key={i} index={i}/>)

让每个孩子都像这样处理自己的形象

ChildComponent = ({index}) => (
    <div>
      <UploadButton
        storage="menus"
        value={this.state.images[index]}
        onUploadComplete={uri => {
          let images = this.state.images.slice()
          images[index] = uri
          this.setState({images})
        }}
      />
    </div>
  );