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

Question

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

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

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

我本来有：

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

，而不是

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

但得到以下错误：

Warning: setState(...): Cannot update during an existing state transition

寻找到错误的原因后，我尝试了箭头函数如上所示，但同样没有错误，并且setText函数不会被调用。

这里是我的代码的简化版本：

便便类：

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

    } 

} 

我能做解决这个问题LEM？

Answer 1

Voo类对​​道具小的语法错误。

它应该如下所示;

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} />