Javascript 反应JS对象

在下面的代码中，我没有在person对象中声明showPerson属性。但我得到了结果。当您单击按钮时，按钮具有隐藏和显示内容。这对我来说很好。但我仍然怀疑，为什么不在对象中声明属性。请用最简单的方式解释一下

import React, { Component } from "react";
import "./App.css";
import Person from "./Person/Person";

class App extends Component {
  state = {
    person: [
      { name: "Andrew", age: 32 },
      { name: "Stephen", age: 42 },
      { name: "Samuel", age: 62 }
    ]
  };

  changeTxt = () => {
    const doesShow = this.state.showPerson;
    this.setState({ showPerson: !doesShow });
  };

  render() {
    let person = null;

    if (this.state.showPerson) {
      person = (
        <div>
          <Person
            name={this.state.person[0].name}
            age={this.state.person[0].age}
          />
          <Person
            name={this.state.person[1].name}
            age={this.state.person[1].age}
            changed={this.changeMethod}
          />
          <Person
            name={this.state.person[2].name}
            age={this.state.person[2].age}
          />
        </div>
      );
    }

    return (
      <div>
        <button onClick={this.changeTxt}>Click here</button>
        {person}
      </div>
    );
  }
}

export default App;

import React，{Component}来自“React”；
导入“/App.css”；
从“/Person/Person”导入人员；
类应用程序扩展组件{
状态={
人:[
{姓名：“安德鲁”，年龄：32}，
{姓名：“斯蒂芬”，年龄：42}，
{姓名：“塞缪尔”，年龄：62}
]
};
changeTxt=（）=>{
const doesShow=this.state.showPerson；
this.setState（{showPerson:！doesShow}）；
};
render（）{
让person=null；
if（this.state.showPerson）{
人=(
);
}
返回(
点击这里
{个人}
);
}
}
导出默认应用程序；

您的问题不清楚，但据我所知，您的代码是有效的，您希望使代码更加简单

如果是，请将If-else分离到不同的函数并进行渲染

    import React, { Component } from "react";
    import "./App.css";
    import Person from "./Person/Person";

        class App extends Component {
          state = {
            person: [
              { name: "Andrew", age: 32 },
              { name: "Stephen", age: 42 },
              { name: "Samuel", age: 62 }
            ]
          };

          changeTxt = () => {
            const doesShow = this.state.showPerson;
            this.setState({ showPerson: !doesShow });
          };


          renderPerson = () => {
              if (this.state.showPerson) {
              return (
                <div>
                  <Person
                    name={this.state.person[0].name}
                    age={this.state.person[0].age}
                  />
                  <Person
                    name={this.state.person[1].name}
                    age={this.state.person[1].age}
                    changed={this.changeMethod}
                  />
                  <Person
                    name={this.state.person[2].name}
                    age={this.state.person[2].age}
                  />
                </div>
              )
            }else{
                return null // your fallback
            }

          }

          render() {
            return (
              <div>
                <button onClick={this.changeTxt}>Click here</button>
                {this.renderPerson()}
              </div>
            );
          }
        }

        export default App;

import React，{Component}来自“React”；
导入“/App.css”；
从“/Person/Person”导入人员；
类应用程序扩展组件{
状态={
人:[
{姓名：“安德鲁”，年龄：32}，
{姓名：“斯蒂芬”，年龄：42}，
{姓名：“塞缪尔”，年龄：62}
]
};
changeTxt=（）=>{
const doesShow=this.state.showPerson；
this.setState（{showPerson:！doesShow}）；
};
renderPerson=（）=>{
if（this.state.showPerson）{
返回(
)
}否则{
返回null//您的回退
}
}
render（）{
返回(
点击这里
{this.renderPerson（）}
);
}
}
导出默认应用程序；

如果您未设置console.log（showPerson）。您将看到，它的

未定义
。但设置后，您将看到它具有值。您不必初始化它们

现在这段代码仍然有效的原因是javascript中有
falsy
和
truthy
值。这些值在if语句中的反应为
true
或
false
值

undefined是一个虚假的值，因此它在if语句中假装为false。当您将值更改为以下值时：
！未定义
。自从<代码>！falsy===true
showPerson
变为true
“请用最简单的方式解释它。”访问不存在的属性会返回未定义的
<代码>未定义
转换为
false
。参见：
var obj={}；log（obj.foo，Boolean（obj.foo））。这与React无关，而是JavaScript的工作方式。
this.state.showPerson
一开始是
未定义的，
！未定义的
是
真的
“写一个总结特定问题的标题”。请阅读：：感谢您以简单的方式解释。@Faruk没问题祝您的项目好运：）别忘了对问题进行投票：）