反应 this.setState 没有更新状态

Question

我试图弄清楚为什么对 this.setState 的调用没有更新状态。

我有以下几行方法：

changeState(state, value){
        this.setState({state:value}, ()=>console.log(this.state));
    }

有几个功能使用这个，但一个是文件上传组件。它是一个简单的组件，可以呈现文件输入，也可以呈现 iframe、禁用的输入和按钮。单击按钮时，我想更改父组件中的状态，然后重新呈现文件组件并显示文件选择器。

对 this.setState 的调用似乎可以正常工作，但是当我在它运行后控制台记录状态或在下一次渲染发生之前停止执行时，状态不受影响。我的文件上传组件有这样一个方法：

renderField(field){
        if(this.props.hasOwnProperty('file') && this.props.file){
            return(
                <div>
                    <iframe src={this.props.file} frameborder="0"> </iframe>
                    <input
                        disabled
                        placeholder={this.props.file}
                        name={field.name}
                        type='text'
                    />
                    <span onClick={()=>this.props.changeFile(this.props.file_type, null)}>&times; Remove</span>
                </div>
            )
        }else{
            return(
                <input
                    {...field}
                    type={field.type}
                    name={field.name}
                    onChange={(event) =>{
                        field.input.onChange(field.input.value = event.target.files[0])}
                    }
                />
            )
        }
    }

当我调用该方法时，我得到以下输出：

但是在控制台记录之后，我的状态并没有改变：

Answer 1

您不想在您的状态中设置state 属性，而是设置state 包含的属性名称。

您可以为此使用computed property name。

changeState(state, value) {
  this.setState({ [state]: value }, () => console.log(this.state));
}