this."FunctionName" 不是函数

Question

我想在 render() 中使用一个函数，该函数将多次调用，因为它会调用 Map() 的每个元素。但是由于某些原因，我的函数没有被正确识别，我得到了错误：

this.IsHeStillAlive is not a function

我完全重写了我的 post 以使其更易于理解，这里是 link 我在 SandBox 上的示例：https://codesandbox.io/s/test-uz-713xy。在这个例子中，我尝试使用函数“IsHeStillAlive”和“SwitchButton”。

感谢您的帮助。

Answer 1

您可以尝试使用 Ternary operator 如下：

<div className="slave">
    <h3>{panel.price}€</h3><br/>
    {
       panel.name === 'Basique' ?
          <Button className="buttonStore"
                  onClick={() => { this.UnsubcribeIt() }}>
              Unsubscribe
          </Button> :
          <Button className="buttonStore"
                  onClick={() => { this.buyit(licenceName) }}>
              Buy Now
          </Button>
    }
</div>

或在第一个 <Button /> 中缩短为 onClick={this.UnsubcribeIt}。

Answer 2

我认为你应该先提取 dataGet 这样就不会混淆了

render(){
let {dataGet} = this.state
  return (
  {this.state.dataGet.map(mapPanel)}
  )
}

告诉我这是否有效

Answer 3

论坛外的人帮我解决了。

更正在我的沙盒中 link 但如果有一天 lin 死了...

以防万一，这里是纠正我的问题的步骤：

将您的方法移出 class，使它们成为同一文件中的函数组件。
将面板参数更改为道具。里面的道具将是一个面板道具
渲染组件

如果沙箱 link 已死，则不会非常明确，但这可能会有所帮助。

this."FunctionName" 不是函数

this."FunctionName" is not a function

javascript

properties

jsx

reactjs