Question

以下，从父组件中成功获取了JSON数据，但是在组件内部调用breakLine()函数时，该函数不起作用，并抛出以下错误消息。

'breakLine'未定义为un-undef

json.db

{
 "studies": [
    {

      "text": [
         "first line here-=br=-second line here"
      ]
    }
}

组件代码：

import React, { Component } from 'react'   

class PortfolioPage extends Component {

  constructor(props) {
    super(props);
    this.state = {        
      resultText: []        
    }

  }

  componentDidMount() {
    this.setState({         
      resultText: this.props.data.text
    })
  }    

  breakLine(text){
    text.replace("-=br=-", "\n");
  }

  render() {
    const { resultText } = this.state;       

    return (
      <div className="portfolio-pages">
        <p>
          {breakLine(resultText)}
        </p>
     </div>
     )
}

export default PortfolioPage

Answer 1

this.丢失了，应该用this.breakLine(resultText)来命名。

尽管您的resultText类型为string []，所以您将需要按以下方式定义breakLine函数：

text.map(t => t.replace("-=br=-", "\n"))

如果您希望每个数组项只有一行，则还可以执行以下操作：

text.join("\n").replace("-=br=-", "\n").split("\n")

Answer 2

将函数绑定到当前上下文并使用 this 关键字：

breakLine = (text) => text.join(' ').replace("-=br=-", "\n");
// [...code...]
{this.breakLine(resultText)}

Answer 3

您需要将此函数绑定到上下文。尝试使用

class PortfolioPage extends Component {
  constructor(props) {
    ...
    this.breakLine = this.breakLine.bind(this)
  }

或箭头样式

breakLine = (text) => {...}

函数调用在React组件中不起作用

3 个答案: