分享
三行代码  ›  专栏  ›  技术社区  ›  BennKingy

如何从映射中呈现一个对象而不是全部对象? - How to render one object from map instead all of them?

  •  1
  • BennKingy  · 技术社区  · 1 周前

    我有一个处于react应用程序状态的profile对象,它包含一个由6个对象组成的数组。

    我希望能够分别渲染这些对象。

          {
             this.state.profiles.map(profile => (
                <div key={profile.mainCompanyID}>
                   {profile.name}
                   {profile.description}
                </div>
              ))
          }
    

    上面的代码将显示所有6个名称/说明。但我希望这个能力只能映射数组中的一个对象,而不是所有对象。

    有什么想法吗?

    4 回复  |  直到 1 周前
        1
  •  2
  •   swapnesh    1 周前

    你可以 filter 拿出数据然后申请 map 是的。

    工作实例- https://codesandbox.io/s/funny-shirley-q9s9j

    代码-

    function App() {
      const profileData = [
        { id: 1, name: "Tom" },
        { id: 2, name: "Dick" },
        { id: 3, name: "Harry" },
        { id: 4, name: "Nuts" }
      ];
    
      const selectedProfile = profileData.filter(x => x.name === "Harry");
      return (
        <div className="App">
          <h1>Test Filter and map in jsx</h1>
          {selectedProfile.map(x => (
            <li>
              {x.id} - {x.name}
            </li>
          ))}
        </div>
      );
    }
    
        2
  •  3
  •   Dupocas    1 周前

    filter 之前的数组 map

    renderBasedOnId = id =>{
        const { profiles } = this.state
        return profiles.filter(x => x.id === id).map(item => <div>{item.name}</div>)
    }
    
    render(){
        return this.renderBasedOnId(this.state.selectedId) //just an example of usage
    }
    
        3
  •  1
  •   ibtsam    1 周前

    好吧,你可以这样做

     {
         this.state.profiles.map(profile => {
            if (profile.mainCompanyID === id) { // id you want to match to
              return (
            <div key={profile.mainCompanyID}>
               {profile.name}
               {profile.description}
            </div>)
            } else {
                return null
               }
          })
      }
    

    希望有帮助

        4
  •  1
  •   Prakash Sharma    1 周前
            {
                     this.state.profiles.map((profile, key) => {
    
        (key===0)?
    return(
                       <div key={profile.key}>
                           <p>Name:{profile.name}</p>
                           <p>Description:{profile.description}</p>
                        </div>
    )
        :
        return null;
    
    
                      })
                  }