Reactjs JSX中的语法错误 类应用程序扩展组件{ render（）{ 返回( ........ {let tags=this.state.tags； for（var键入标记）{ {tags[key]} }} ......... ) } }

我有错误：

编译失败-意外令牌

。我不明白我哪里出错了。请帮帮我。

更换

class App extends Component {
    render() {
        return (
            ........
            { let tags = this.state.tags;
            for (var key in tags) {
                <p className="h3 text-primary">{tags[key]}</p>
            }}
            .........
         )
    }
}

{
让tags=this.state.tags；
for（var键入标记）{
{tags[key]}
}
}

与

---

{Object.keys（tags）.map（key=>
{tags[key]}
）}

首先，你的应用程序中没有状态。如果没有状态，则不能使用this.state.something

其次，不要像这样在渲染函数中使用for循环。正如另一个答案所建议的那样，有更好的方法来做到这一点。但如果你真的想这么做：

{
 let tags = this.state.tags;
 for (var key in tags) {
   <p className="h3 text-primary">{tags[key]}</p>
 }
}

---

该代码块在组件中的何处？我编辑的问题指向带有

let

的行，请提供一个。我建议创建一个新组件，并构建足够的代码来重现您遇到的问题。这是行不通的，我试着这么做<代码>未捕获类型错误：无法读取未定义的属性“未定义”发布整个组件，您的状态是否已定义？我发布了完整组件组件组件中没有状态。您认为如何从这个.state获取标记？

class App extends React.Component {
  state = {
    tags: {
      foo: "somefoo",
      bar: "somebar",
      baz: "somebaz"
    }
  };

  render() {
    const { tags } = this.state;
    const arr = [];
    for (var key in tags) {
      arr.push(<p className="h3 text-primary">{tags[key]}</p>);
    }
    return (
      arr
    );
  }
}

class App extends React.Component {
  state = {
    tags: {
      foo: "somefoo",
      bar: "somebar",
      baz: "somebaz"
    }
  };

  getTags = () => {
    const { tags } = this.state;
    const arr = [];
    for (var key in tags) {
      arr.push(<p className="h3 text-primary">{tags[key]}</p>);
    }
    return arr;
  }

  render() {
    return (
      this.getTags()
    );
  }
}

class App extends React.Component {
  state = {
    tags: {
      foo: "somefoo",
      bar: "somebar",
      baz: "somebaz"
    }
  };

  render() {
    const { tags } = this.state;
    return (
      Object.keys(tags)
        .map(key => <p key={key}>{tags[key]}</p>)
    );
  }
}

class App extends React.Component {
  state = {
    tags: {
      foo: "somefoo",
      bar: "somebar",
      baz: "somebaz"
    }
  };

  getTags = () => {
    const { tags } = this.state;
    return Object.keys(tags)
      .map( key => <p key={key}>{tags[key]}</p>)
  }

  render() {
    return (
      this.getTags()
    );
  }
}

class App extends React.Component {
  state = {
    tags: {
      foo: "somefoo",
      bar: "somebar",
      baz: "somebaz"
    }
  };

  getTags = () => {
    const { tags } = this.state;
    return Object.keys(tags)
      .map( key => <p key={key}>{tags[key]}</p>)
  }

  render() {
    return (
      <div>
        { this.getTags() }
      </div>
    );
  }
}