为 React 中的每个对象渲染 json 对象名称/描述

Question

在这里反应新手。我有一个组件，它以 JSON 格式获取一组对象并将其保存到状态中。我现在不确定如何在组件渲染函数中渲染每个对象的名称/描述。有任何想法吗？https://codesandbox.io/s/admiring-ishizaka-rfp3k - 演示   return (      <div className="App">        {name1} // Object 1 name        {description1} // Object 1 description        {name2} // Object 2 name        {description2} // Object 2 description      </div>    );

Answer 1

您应该使用 map 遍历对象的配置文件数组：

<div className="App">

        {this.state.profiles.map((profile, index) => 

          <p>{profile.name}

           {profile.description}</p>

        )}

        <br/>

      </div>

关于地图功能的更多细节：https : //reactjs.org/docs/lists-and-keys.html

Answer 2

您需要遍历数据（即对象数组）并使用您所需的对象属性呈现它们。

添加一个返回 JSX 以渲染配置文件数据的方法：

renderProfiles = () => {

    const profiles = this.state.profiles || [];

    const renderProfiles = profiles.map(profile => (

        <div key={profile.mainCompanyID}> // pass unique id as a key value

            {profile.name}

            {profile.description}

        </div>

    ));

    return renderProfiles;

};

然后将其添加到您的主要渲染方法中：

render() {

    return (

      <div className="App">

        {this.renderProfiles()}

      </div>

    );

}

完整的代码和框链接 - https://codesandbox.io/s/elastic-sara-qjc7r

Answer 3

您可以创建一个方法并从渲染调用它：

  render() {

    return (

      <div className="App">

        {this.renderProfiles()}

      </div>

    );

  }

  renderProfiles = () => {

    return this.state.profiles.map((profile)=>{

      const {name,description} = profile;

      return (

        <div className="App">

        {name} 

        {description} 

        </div>

      )

    })

  }

}