Question

有一件事我无法反应，为什么当我将道具传递给一个组件然后在它们上面做一个map（）时，它会出现1个项目？这是代码：

class ImageInput extends Component {
constructor(props){
    super(props);
    this.state = {
        photos: props.photos
    }
    this.handleClick = this.handleClick.bind(this);
}

handleClick() {
    this.inputElement.click();
}


render(){
    const previews = this.state.photos.map((photo, index) => 
        <ImagePreview key={index} preview={photo.preview} name={photo.name} />
    );
    console.log(1, this.state.photos);
    console.log(2, previews);
    return(
        <div className="form-image-field">
            <div className="form-image-input" onClick={this.handleClick}>
                <p className="image-input-title">Add photo</p>
                <p className="image-input-text">Minimum size of 300x300 jpeg jpg png 5 MB</p>
                <input type="file" 
                       accept="image/*" 
                       style={{"display":"none"}}
                       ref={input => this.inputElement = input} 
                       onChange={this.props.handleImage} />
            </div>
            { previews }
        </div>
    );

}

添加第一个pictire后，console.log看起来像：

   1 []0: {file: File, preview: "...", name: "C..."}
     length: 1
   2 []
     length: 0

在第二个之后：

1 [{…}]0: {file: File, preview: "...", name: "..."}
       1: {file: File, preview: "...", name: "..."}
       length: 2
2 [{…}]0: {...SomeObject...}
       length: 1

Answer 1

因为你是通过引用来做的 - 大概是推入父组件中的props.photos - 而你的孩子在this.state.photos中有这个 - 但你是从状态而不是道具渲染的。因此，更新将不会被提取/注意，直到稍后更改。

要么通过componentWillReceiveProps(newProps){ this.setState({photos: newProps.photos}) }保持同步，要么只循环this.props.photos而不是拥有本地状态并保持无状态。

render方法中的map map（）函数是后退一步

1 个答案: