代码之家  ›  专栏  ›  技术社区  ›  KAT

对此作出反应。setState未更新状态

  •  2
  • KAT  · 技术社区  · 6 年前

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

    当我调用该方法时,会得到以下输出: enter image description here

    但是,在控制台日志记录之后,我的状态几乎没有变化: enter image description here

    1 回复  |  直到 6 年前
        1
  •  6
  •   Tholle    6 年前

    你不想设置 state 您所在州的属性,但是 状态 包含。

    你可以用 computed property name 为了这个。

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