Javascript 当使用循环和映射时，更干净的代码

我用react编写了这段代码，它变得非常混乱，所以我想知道是否有办法让这段代码和其他类似的代码看起来更干净

render() {
    let result = null;
    var obj = this.state.welcome;
    let test = null;

    if (this.state.isReal) {
      test = Object.entries(obj).map(([key, value], index) => {
        return (
          <li key={index}>
            Word: "{key}" repeats: {value} times
          </li>
        );
      });
      result = (
        <Aux>
          <h3>Title</h3>
          <ul>{test}</ul>
        </Aux>
      );
    }
    return (
      <Aux>
        <div className="bframe">
          <div className="form" />
          {result}
        </div>
        <Footer />
      </Aux>
    );
  }

---

我想知道是否有可能将所有内容移到“return”语句之前，最好放在一个单独的文件中。我试着制作一个功能组件并传递道具，但我无法在那里做循环。有什么建议吗？

可能是下面的建议

const Result={real，welcome}=>{ 如果！实返回空； const words=Object.entrieswelcome.map[key，value]，index=> 字：{key}重复：{value}次 ; 回来 标题 {words} ; } 类YourComponent扩展React.Component{ // ... 渲染{ const{isReal，welcome}=this.state； 回来 ; }

---

} 也许像下面这样

const Result={real，welcome}=>{ 如果！实返回空； const words=Object.entrieswelcome.map[key，value]，index=> 字：{key}重复：{value}次 ; 回来 标题 {words} ; } 类YourComponent扩展React.Component{ // ... 渲染{ const{isReal，welcome}=this.state； 回来 ; }

---

} 您可以将代码缩减为以下内容：

render() {
    const { welcome, isReal } = this.state

    return (
        <Aux>
            <div className="bframe">
                <div className="form" />
                {isReal && 
                    <Aux>
                        <h3>Title</h3>
                        <ul>
                            {Object.entries(welcome).map(([key, value]) => 
                                <li key={key}>
                                    Word: "{key}" repeats: {value} times
                                </li>
                            )}
                        </ul>
                    </Aux>
                }
            </div>
            <Footer />
        </Aux>
    );
}

不要使用var，默认情况下使用const，如果要修改变量，请使用let

通过使用内联if:&&，可以选择是否渲染元素

您的函数也没有必要，因为它可以被内联JS替换

您的映射也可以从：x.mapa=>{return}减少到x.mapa=>

---

您还可以使用每个项目的键作为React键，因为它们在对象中都必须是唯一的。

您可以将代码简化为以下内容：

render() {
    const { welcome, isReal } = this.state

    return (
        <Aux>
            <div className="bframe">
                <div className="form" />
                {isReal && 
                    <Aux>
                        <h3>Title</h3>
                        <ul>
                            {Object.entries(welcome).map(([key, value]) => 
                                <li key={key}>
                                    Word: "{key}" repeats: {value} times
                                </li>
                            )}
                        </ul>
                    </Aux>
                }
            </div>
            <Footer />
        </Aux>
    );
}

不要使用var，默认情况下使用const，如果要修改变量，请使用let

通过使用内联if:&&，可以选择是否渲染元素

您的函数也没有必要，因为它可以被内联JS替换

您的映射也可以从：x.mapa=>{return}减少到x.mapa=>

您还可以使用每个项目的键作为React键，因为它们在对象中都必须是唯一的。

您应该避免使用索引作为键。在您的情况下，请使用密钥。请参阅：您应该避免使用索引作为键。在您的情况下，请使用密钥。见：