Question

我有以下代码。如果我将setText函数一次传递给MyClicker类，它可以正常工作。因此，在下面的代码中，我看到正确显示“第二文本”文本。

但是，我也想将setText函数传递给孙子类。下面的文字“第三文字”从未出现过。

按钮显示正常，但是，当我点击它时它似乎没有做任何事情。控制台中没有显示错误消息，并且未调用setText（）函数。

我最初有：

<Voo setText={this.setText.bind(this)} />

而不是

<Voo setText={() => this.setText} />

但收到以下错误：

警告：setState（...）：在现有状态期间无法更新过渡

在查看错误原因后，我尝试了上面的箭头功能，但是没有错误，并且没有调用setText函数。

以下是我的代码的简化版本：

Poo Class：

import MyClicker from './MyClicker'
import Voo from './Voo'

class Poo extends React.Component {

    constructor() {
        super();

        this.state = {
            text: "Intro Text",
        };

    }

    setText(text){
        this.setState({
            text: text
        })
    }

    render(){
        return (
            <div>
                <h2>{this.state.text}</h2>
                <MyClicker handleClick={this.setText.bind(this, "Second Text")} text="Click for 2nd Text" />

                <Voo setText={() => this.setText} />
        )
    }

}

Voo类：

import MyClicker from './MyClicker'
class Voo extends React.Component {

    render(){
        <MyClicker handleClick={this.props.setText("Third Text")} text="Click for 3rd Text" />
    }

}

MyClicker类：

class MyClicker extends React.Component {

    handleClick(){
        this.props.handleClick();
    }


    render(){
        return (
            <div onClick={this.handleClick.bind(this)}>{this.props.text}</div>
            )

    }

}

我该怎么做才能解决这个问题？

Answer 1

Voo类在handleClick道具上有一个小的语法错误。

应该如下;

class Voo extends React.Component {
    render(){
        <MyClicker handleClick={() => this.props.setText("Third Text")} text="Click for 3rd Text" />
    }
}

如果你像使用它一样使用它，那么该功能将被执行而不仅仅是作为道具传递。括号内执行函数。

Answer 2

您可以像这样绑定您的函数。然后通过setText，如下所示，那么你将通过这个以及“自动”需要的东西。

如果您使用()，您将执行setState，这将重新呈现您的组件并将再次执行该状态...已创建无限循环。

setText = (text) => {
  this.setState({
      text: text
  })
}

<Voo setText={this.setText} />

试图将值传递给已作为props传递的函数

2 个答案: