首页 > 解决方案 > 反应 this.setState 没有更新状态

问题描述

我试图弄清楚为什么对 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])}
                    }
                />
            )
        }
    }

当我调用该方法时,我得到了这个输出: 在此处输入图像描述

但是在控制台记录后,我的状态没有改变: 在此处输入图像描述

标签: javascriptreactjs

解决方案


您不想state在您的状态下设置属性,而是设置包含的属性名称state

您可以computed property name为此使用 a 。

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

推荐阅读