代码之家 › 专栏 › 技术社区 › Pulkit Aggarwal

React redux:这个。设置状态不工作

react-redux reactjs javascript

0

Pulkit Aggarwal · 技术社区 · 9 年前

我的部件代码是:

import React from 'react';
import Input from 'src/containers/Input';
type StateType = {
     searchChannel: string
};
export default class AddChannelComponent extends React.Component < void,
PropsType,
void > {
     state : StateType;

     constructor(props : PropsType) {
          super(props);
          this.state = {
               searchChannel: 'test'
          };
     }

     inputHandler(value) {
          console.log("text  isdddd", value);
          this.setState({searchChannel: value});  <==Error Occur Here
     }
     render() {
          return (
               <div >
                    <p>Type your input</p>
                    <div>
                         <Input inputHandler={this.inputHandler} placeholder="Search all public channels..."/>
                    </div>
               </div>
          );
     }
}

inputHandler函数由子组件调用。在这个里面。setState({searchChannel:value})给了我这样一个错误。设置状态不是一个函数。虽然我在构造函数中为searchChannel分配了一个测试值,并且当我在render中控制台它的值时,它正在工作。

2 回复 | 直到 8 年前

1

3

Hitmands 9 年前

我的更正是这样的

import React from 'react';
import Input from 'src/containers/Input';

export default class AddChannelComponent extends React.Component{

     constructor(props) {
          super(props);
          this.state = {
               searchChannel: 'test'
          };
     }

     inputHandler = (value) => {
          console.log("text is dddd", value);
          this.setState({searchChannel: value});
     }
     render() {
          return (
               <div >
                    <p>Type your input</p>
                    <div>
                         <Input inputHandler={this.inputHandler} placeholder="Search all public channels..."/>
                    </div>
               </div>
          );
     }
}

原因

如果你通过 instance method (它指的是特定的上下文,即访问 this

更多信息请点击此处: How to access the correct `this` inside a callback?

如: inputHandler={this.inputHandler}

这 你可以:

使用 bound functions inputHandler={this.inputHandler.bind(this)}
使用 arrow functions inputHandler={(...args) => this.inputHandler(...args)}
使用 Class Fields (not-standard-yet) imputHandler = () => {}

2

0

Alireza 8 年前

import React from 'react';
import Input from 'src/containers/Input';

export default class AddChannelComponent extends React.Component{

     constructor(props) {
          super(props);
          this.state = {
               searchChannel: 'test'
          };
     }

     inputHandler = (value) => {
          console.log("text is dddd", value);
          this.setState({searchChannel: value});
     }
     render() {
          return (
               <div >
                    <p>Type your input</p>
                    <div>
                         <Input inputHandler={this.inputHandler.bind(this)} placeholder="Search all public channels..."/>
                    </div>
               </div>
          );
     }
}