使用深度嵌套的 json 對象映射數組

Question

這是我的第一篇文章，對如何正確映射 json 數據感到非常困惑。

問題來自當您使用 Object.keys 映射用戶地址屬性時，一切都很好地映射，直到它到達“geo”屬性值。 更容易映射和渲染每個屬性的解決方案是什么？

 const style = { list: { listStyle: "none" } }; const data = [ { id: 1, name: "Leanne Graham", username: "Bret", email: "Sincere@april.biz", address: { street: "Kulas Light", suite: "Apt. 556", city: "Gwenborough", zipcode: "92998-3874", geo: { lat: "-37.3159", lng: "81.1496" } }, phone: "1-770-736-8031 x56442", website: "hildegard.org", company: { name: "Romaguera-Crona", catchPhrase: "Multi-layered client-server neural-net", bs: "harness real-time e-markets" } } ]; function App() { return ( <div className="App"> <ul style={style.list}> {data.map(user => { return ( <Fragment key={user.id}> <li>{user.username}</li> <ul style={style.list}> {Object.keys(user.address).map(key => { return ( <li> {key} {user.address[key]} </li> ); })} </ul> </Fragment> ); })} </ul> </div> ); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

在 geo 上使用對象鍵，在你的li檢查鍵是否等於 geo，然后映射它。

<li>
   {key} {key === 'geo' ? Object.keys(user.address[key]).map(geo => <i>{user.address[key][geo]}</i>) : user.address[key] }
</li>

 // Get a hook function const {useState} = React; const style = { list: { listStyle: "none" } }; const data = [ { id: 1, name: "Leanne Graham", username: "Bret", email: "Sincere@april.biz", address: { street: "Kulas Light", suite: "Apt. 556", city: "Gwenborough", zipcode: "92998-3874", geo: { lat: "-37.3159", lng: "81.1496" } }, phone: "1-770-736-8031 x56442", website: "hildegard.org", company: { name: "Romaguera-Crona", catchPhrase: "Multi-layered client-server neural-net", bs: "harness real-time e-markets" } } ]; function App() { return ( <div className="App"> <ul style={style.list}> {data.map(user => { return ( <React.Fragment key={user.id}> <li>{user.username}</li> <ul style={style.list}> {Object.keys(user.address).map(key => { return ( <li> {key} {key === 'geo' ? Object.keys(user.address[key]).map(geo => <i>{`${geo}: ${user.address[key][geo]} `}</i>) : user.address[key] } </li> ); })} </ul> </React.Fragment> ); })} </ul> </div> ); } // Render it ReactDOM.render( <App />, document.getElementById("react") );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script> <div id="react"></div>

Answer 2

只需為geo鍵添加一個if語句並返回您想要的 JSX。

{
  Object.keys(user.address).map(key => {
    if (key === "geo") {
      Object.keys(user.address[key]).map(geoKey => {
        return (
          <li>
            {geoKey} {user.address[key][geoKey]}
          </li>
        );
      });
    } else {
      return (
        <li>
          {key} {user.address[key]}
        </li>
      );
    }
  });
}