Question

我正在尝试输出组件中的变量，但是我收到以下错误，

无效的正则表达式：缺少/

我的代码如下，

class Profile extends React.Component {
  constructor() {
    super();
    this.state = {
      user:user
    }
    this.updateAvatar = this.updateAvatar.bind(this);
    this.formatName = this.formatName.bind(this);
  }

  render() {
    let user_name = this.formatName(this.state.user.first_name, this.state.user.last_name);
    console.log(user_name);
    return (
      <Avatar image={this.state.user.avatar}
              changeImageOnClick={this.updateAvatar} />
      <p>{ user_name }</p>
    )
  }

  formatName(first_name, last_name) {
    console.log(first_name);
    return first_name + " " + last_name;
  }

  updateAvatar() {
      this.setState({user:{avater:'new'}})
  }
}

不明白为什么我会收到这个错误，这应该很简单:(

Answer 1

您无法在同一级别返回两个节点。只有一个，所以你需要包装它。试试这个：

class Profile extends React.Component {
  constructor() {
    super();
    this.state = {
      user:user
    }
    this.updateAvatar = this.updateAvatar.bind(this);
    this.formatName = this.formatName.bind(this);
  }

  render() {
    let user_name = this.formatName(this.state.user.first_name, this.state.user.last_name);
    console.log(user_name);
    return (
      <div>
        <Avatar image={this.state.user.avatar}
                changeImageOnClick={this.updateAvatar} />
        <p>{ user_name }</p>
      </div>
    )
  }

  formatName(first_name, last_name) {
    console.log(first_name);
    return first_name + " " + last_name;
  }

  updateAvatar() {
      this.setState({user:{avater:'new'}})
  }
}

在反应组件中输出变量

1 个答案: