Javascript render方法中的react map（）函数将在一步之后执行

有一件事我不能理解为什么当我把道具传给一个组件，然后在上面做一个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>
    );

}

第二次之后是：

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

---

因为你是通过引用来做的-大概是在父组件中推入

props.photos

，而你的孩子在

this.state.photos

-但是你是从state而不是props渲染的。因此，在以后的更改之前，不会收到/注意到更新

---

或者通过

组件willreceiveprops（newProps）{this.setState（{photos:newProps.photos}）}

保持它们的同步，或者只是循环

this.props.photos

，而不是使用本地状态并保持其无状态

这可能是由于

setState

是异步的。这怎么可能？他从不在组件中调用setState，也从不更新状态，照片应始终为空。它不是空的。这是参考资料

this.state.phtotos=props.photos

在他的构造函数中。如果在父对象中他有

props={this.state.photos}

并且在

handleImage

中他推入照片数组并设置状态，它也会通过引用更新状态，但不会渲染。通过更改为

this.state.phtotos=props.photos.slice（）

可以轻松测试它，但不会有任何结果。是的，这可能是照片到达目的地的唯一方法谢谢您的帮助，但它保持不变。问题不在于

this.state

或

this.props

它们是根据

console.log（）

更新的，但是为什么在它们上执行

map（）

之后，元素比is

props

少1？

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