反应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));
}