2016-11-06 64 views
1

我一直获得this.setState警告:反应上安装或安装

警告:的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; 

如何安装我的组件,以便警告消失,并且我可以更新用户输入状态?

UPDATE
最近,我改变了我的.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中的某些东西没有jiving。

+0

在什么情况下您会收到警告? – zerkms

+0

'state = { inputValue:'“ }' 尝试在构造函数上方分配状态,而不是在 –

+0

100%确定该错误与上面的代码无关。 – FurkanO

回答

-1

使用defaultValue代替值。

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

结帐此不受控制组件概念:

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

基本上输入保持其自身的状态时设置值使用表达会触发在输入组件的状态变化(未安装部件),而呈现SearchInput部件。