javascript - React-redux:this.setState 不起作用

Question

我正在开发一个用react-redux编写的项目。我想在组件中使用组件状态而不是全局状态。
我的组件代码是:

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 函数由子组件调用。在此内部 this.setState({searchChannel: value}) 给我错误 this.setState 不是一个函数。尽管我在构造函数中为 searchChannel 分配了一个测试值，并且当我在渲染中控制台它的值时它正在工作。

Answer 1

我的修正是这样的

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

<小时/>

原因

如果您传递实例方法(指的是特定上下文，又名访问this)，您将丢失其原始上下文，因为它取决于调用者。

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

例如:inputHandler={this.inputHandler}

要保留this，您可以:

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