React組件不會映射數組

Question

現在就開始學習React，我似乎無法在映射到Planet數組后讓Planet組件顯示服裝。 即使當我從Planet組件中進行console.log記錄時，它也會顯示為undefined。 顯然，我在App組件和Planet組件之間搞砸了，但我不知道是什么。

const planets = [
  {
    id: '1',
    name: 'Mercury',
    diameter: '3,031.67 mi',
    moons: 'none',
    desc: 'Mercury is the closest planet to the Sun. Due to its proximity, it\'s not easily seen except during twilight. For every two orbits of the Sun, Mercury completes three rotations about its axis. Up until 1965 it was thought that the same side of Mercury constantly faced the Sun.',
    url: 'img/mercury.jpg' 
  },
  {
    id: '2',
    name: 'Venus',
    diameter: '7,521 mi',
    moons: 'none',
    desc: 'Venus is the second planet from the Sun and is the second brightest object in the night sky after the Moon. Venus is the second largest terrestrial planet and is sometimes referred to as the Earth’s sister planet due the their similar size and mass.',
    url: 'img/venus.jpg' 
  },
  {
    id: '3',
    name: 'Earth',
    diameter: '7,917.5 mi',
    moons: '1',
    desc: 'Earth is the third planet from the Sun and is the largest of the terrestrial planets. The Earth is the only planet in our solar system not to be named after a Greek or Roman deity. The Earth was formed approximately 4.54 billion years ago and is the only known planet to support life.',
    url: 'img/earth.jpg' 
  },
  {
    id: '4',
    name: 'Mars',
    diameter: '4,212 mi',
    moons: '2',
    desc: 'The fourth planet from the Sun and the second smallest planet in the solar system. Mars is often described as the "Red Planet" due to its reddish appearance. It\'s a terrestrial planet with a thin atmosphere composed primarily of carbon dioxide.',
    url: 'img/mars.jpg'
  },
  {
    id: '5',
    name: 'Jupiter',
    diameter: '86,881.4 mi',
    moons: '79',
    desc: 'The planet Jupiter is the fifth planet out from the Sun, and is two and a half times more massive than all the other planets in the solar system combined. It is made primarily of gases and is therefore known as a "gas giant".',
    url: 'img/jupiter.jpg' 
  },
  {
    id: '6',
    name: 'Saturn',
    diameter: '72,367.4 mi',
    moons: '62',
    desc: 'Saturn is the sixth planet from the Sun and the most distant that can be seen with the naked eye. Saturn is the second largest planet and is best known for its fabulous ring system that was first observed in 1610 by the astronomer Galileo Galilei.',
    url: 'img/saturn.jpg'
  },
  {
    id: '7',
    name: 'Uranus',
    diameter: '31,518 mi',
    moons: '27',
    desc: 'Uranus is the seventh planet from the Sun. While being visible to the naked eye, it was not recognised as a planet due to its dimness and slow orbit. Uranus became the first planet discovered with the use of a telescope.',
    url: 'img/uranus.jpg' 
  },
  {
    id: '8',
    name: 'Neptune',
    diameter: '30,599 mi',
    moons: '14',
    desc: 'Neptune is the eighth planet from the Sun making it the most distant in the solar system. This gas giant planet may have formed much closer to the Sun in early solar system history before migrating to its present position.',
    url: 'img/neptune.jpg' 
  },
];


   const App = (props) => {
  return (
  <Container planets={props.planets} >

    {props.planets.map((planet) => {
    return ( <Planet
      name={planet.name}
      key={planet.id.toString()} 
      name={planet.name} 
      diameter={planet.diameter} 
      moons={planet.moons}
      desc={planet.desc}
      url={planet.url}

      />)
  })}

  </Container>
  );
  }

  const Planet = (props) => {
         console.log(props.url)
      return (
       <div className="card">
        <div>
          <img src={props.url} alt={props.name} />
        </div>
        <h2>{props.name}</h2>
        <p>{props.desc}</p>
        <h3>Planet Profile</h3>
        <ul>
          <li><strong>Diameter:</strong>{props.diameter}</li>
          <li><strong>Moons:</strong> {props.moons}</li>
        </ul>
      </div>
  );
  };


  const Container = (props) => {
  console.log(props.planets.length)
    return (
      <div className="container">
        <Planet planets={props.planets} 
      />
      </div>
  );
  };


  ReactDOM.render(
    <App planets={planets}  />,
    document.getElementById('root')
  );

Answer 1

您的Container組件未呈現其children

const Container = props => {
  return (
    <div className="container">
      <Planet planets={props.planets} />
    </div>
  );
};

請注意，在div標簽之間，您僅渲染了一個Planet組件。

您可能應該將其更改為：

const Container = props => {
  return (
    <div className="container">{props.children}</div>
  );
};

因此，在您的App組件中，您現在可以使用map功能。

    <Container>
      {props.planets.map(planet => {
        return (
          <Planet
            name={planet.name}
            key={planet.id.toString()}
            name={planet.name}
            diameter={planet.diameter}
            moons={planet.moons}
            desc={planet.desc}
            url={planet.url}
          />
        );
      })}
    </Container>

查看Container標記之間的所有內容-將作為props.children提供給Container組件。

您可以在此處了解更多信息： https : //reactjs.org/docs/composition-vs-inheritance.html

有很多是談論陣營的其他好文章的children道具-只是谷歌React props.children

Answer 2

也許您在傳遞數據時丟失了某些東西。 此外，您的代碼是多余的，並且可能在某些時候崩潰。 通過必要的安全檢查來進行適當的結構重組。 此外， Container應該接收行星列表（數組），而Planet組件應該僅接收行星列表的一項，而不是整個數組。 使用這段代碼。 我已經在測試后發布了它。 希望您能從此代碼中學到一些好點。

const App = props => {
  // destructuring data with extra safety checks to prevent code crashes
  const { planets = [] } = props || {};
  return <Container planets={planets} />;
};

const Container = props => {
  // adding extra guards to prevent code crashes
  const { planets = [] } = props || {};
  return (
    <div className="container">
      {planets && planets.map(planet => <Planet planet={planet} />)}
    </div>
  );
};

const Planet = props => {
  const { planet = {} } = props || {};
  return (
    <div className="card">
      <div>
        <img src={planet.url} alt={planet.name} />
      </div>
      <h2>{planet.name}</h2>
      <p>{planet.desc}</p>
      <h3>Planet Profile</h3>
      <ul>
        <li>
          <strong>Diameter:</strong>
          {planet.diameter}
        </li>
        <li>
          <strong>Moons:</strong> {planet.moons}
        </li>
      </ul>
    </div>
  );
};

ReactDOM.render(<App planets={planets} />, document.getElementById("root"));