对已安装或正在安装的 this.setState 警告做出反应答案

【问题标题】：react this.setState Warning on mounted or mounting对已安装或正在安装的 this.setState 警告做出反应
【发布时间】：2016-11-06 20:13:12
【问题描述】：

我不断得到：

警告：setState(...): 只能更新挂载或挂载零件。这通常意味着您在未安装的设备上调用了 setState() 零件。这是一个无操作。请检查 SearchInput 的代码组件。

我尝试过以下这些：
https://facebook.github.io/react/docs/two-way-binding-helpers.html#linkedstatemixin-before-and-after

https://stackoverflow.com/questions/21029999/react-js-identifying-different-inputs-with-one-onchange-handler

https://stackoverflow.com/questions/28773839/react-form-onchange-setstate-one-step-behind

问题很简单：当用户在输入字段中输入时，通过onChange 属性和setState 捕获输入

import React, { Component } from 'react';

class SearchInput extends Component {
  constructor() {
    super();
    this.state = {
      inputValue: ''
    };
    this.onChange = this.onChange.bind(this);
  }

  render() {
    return (
      <input
        type="text"
        value={this.state.inputValue}
        onChange={this.onChange} />
    );
  }

  onChange(e) {
    console.log('yo');
    this.setState({ inputValue: e.target.value });
  }
}

export default SearchInput;

如何挂载我的组件以使警告消失并更新用户输入状态？

更新
我最近将我的.babelrc 文件更改为：

{
  "presets": ["latest-minimal", "stage-1", "react"],
  "plugins": ["react-hot-loader/babel"]
}

关注这个：https://github.com/gabmontes/babel-preset-latest-minimal

但是一旦我恢复到以前的状态：

{
  "presets": ["es2015", "stage-1", "react"],
  "plugins": ["react-hot-loader/babel"]
}

警告消失了。

latest-minimal 中的某些内容不正确。

【问题讨论】：

在什么情况下会收到警告？
state = { inputValue: "" } 尝试在构造函数上方而不是在内部分配状态
100% 确定错误与上述代码无关。
@zerkms 我正在使用 webpack 加载具有根入口点的 index.html。唯一的组件就是这个<SearchInput />
@FurkanO 你能详细说明一下吗？

标签： javascript events reactjs

【解决方案1】：

使用 defaultValue 代替 value。

render() {
 return (
  <input
    type="text"
    defaultValue ={this.state.inputValue}
    onChange={this.onChange} />
 );
}

查看这个不受控制的组件概念：

https://facebook.github.io/react/docs/forms.html#uncontrolled-components

当你设置值使用表达式时，输入基本上保持自己的状态，它会在渲染 SearchInput 组件时触发输入组件（未安装的组件）的状态更改。

【讨论】：