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

反应this.setState不是更新状态

1 个答案: