Question

我在另一个组件的onClick函数中的一个组件中调用setState，但它说this.setState不是函数，并且组件在componentWill update中反复调用setState。我该如何解决？这与app.js文件有关：导出默认类App扩展了React.Component {

constructor(props) {
    super(props);

    this.state = {
        activeScreen: 'dashboard'
    }
}

setActiveScreen(key) {
    this.setState({
        activeScreen: key
    })
}

render() {
    return (
        <NavBar activeScreen={this.state.activeScreen} setActiveScreen={this.setActiveScreen} />
    )
}

这是导航栏组件的相关部分：

class NavBar extends Component {

render() {
    return (
        <li className="nav-item" key={key}>
             <Link className={`nav-link ${this.props.activeScreen == i.key ? 'active' : ''}`} to={i.to} onClick={() => {this.props.setActiveScreen(i.key)}}>
                 {i.label}
             </Link>
        </li>
    )
}

Answer 1

您必须在App组件的构造函数中将setActiveScreen函数绑定到this。

赞：

constructor(props) {
    super(props);

    this.state = {
        activeScreen: 'dashboard'
    }
    this.setActiveScreen = this.setActiveScreen.bind(this);
}

或者，如@Nico在评论中所说，使用箭头功能。

赞：

setActiveScreen = key => {
  // logic
}

Answer 2

如果您在基于类的组件中具有此功能，则可以将当前功能更新为如下所示的箭头功能。

    setActiveScreen = (key) => {
     this.setState({
        activeScreen: key
     })
    }

问题是您正在访问此文件，而没有给出上下文。

另一种方法是将其绑定到函数。下面是在构造函数内部执行此操作的示例。

  constructor(props) {
 super(props);

 this.setActiveScreen = this.setActiveScreen.bind(this);
 // Other code ....
}

Answer 3

首先，必须像这样在构造函数中绑定如何使用setState的每个方法：

this.setActiveScreen = this.setActiveScreen.bind(this);

第二，仅出于良好习惯，您可以在NavBar中定义道具，如下所示：

static propTypes = {
        setActiveScreen: PropTypes.func.isRequired,
    }

第三，在渲染中使用箭头功能不是一个好习惯。因此，您必须：

使用lodash中的partial 所以看起来像这样：

<Link onClick={ _.partial(this.props.setActiveScreen, i.key)}}> 或者，您可以在NavBar组件中定义一个由onClick调用的特定方法，然后在onClick默认提供的事件对象中检索密钥

如何成功地将一个组件的状态更改为另一个组件的状态？

3 个答案: