无法在地图函数内渲染

Question

我有一个映射函数，它应该返回一个具有解构属性的组件 地图本身有效，当我控制台记录它们时，我会收到所有正确的值。但是当我将它们传递给组件并将它们插入返回时，什么都不会被渲染。

父组件：

export default function List({ activities }) {
  function renderThings() {
    activities.map((activity) => {
      const {
        title,
        price
      } = activity;
    
      return (
        <li>
          <Activity
            title={title}
            price={price}
          />
        </li>
      );
    });
  }
  return (
    <div>
      <ul className="List">{renderThings()}</ul>
    </div>
  );
}

Activity/子组件：

export default function Activity({
  title,
  price,
}) {

  return (
    <div className="list-item">
      <h1>{title}</h1>
      <p>{price}</p>
    </div>
  );
}

我看不出哪里出错了

Answer 1

您需要return Array.prototype.map 结果：

return activities.map((activity) => {

希望对您有所帮助！

Answer 2

这段代码可以正常工作。

export default function List({ activities }) {
  function renderThings() {
    return activities.map((activity) => {
      const {
        title,
        price
      } = activity;

      return (
        <li>
           <Activity
             title={title}
             price={price}
           />
         </li>
       );
     });
   }
   return (
     <div>
       <ul className="List">{renderThings()}</ul>
     </div>
   );
 }
 Activity/ child Component:

     export default function Activity({
   title,
   price,
 }) {

   return (
     <div className="list-item">
       <h1>{title}</h1>
       <p>{price}</p>
     </div>
   );
 }