无法读取未定义的属性（读取：'map'）

Question

我一生都无法弄清楚为什么它不阅读地图，我有控制台记录了 item.title 等单独的片段，它们可以工作，但是这根本不起作用，一直给我一个错误，我注意到了还有一个对象是不确定的，天知道是什么原因。

感谢任何帮助 - 我是新人

 function Card(props) {
 const updatedData = props.data;
 console.log(updatedData);
  const newEntry = updatedData.map(function (item) {
    return (
      <div className="main-container" key={item.id}>
        <div className="main-image">
          <img src={item.imageUrl} alt="" />
        </div>
        <div className="main-info">
          <div className="location-container">
            <img className="placeholder-logo" src={placeholder} alt="" />
            <p className="location">{item.location}</p>
            <a href={item.googleMapsUrl}>View on Google Maps</a>
          </div>
          <h1>{item.title}</h1>
          <h4 className="dates">
            {item.startDate}-{item.endDate}
          </h4>
          <p className="description">{item.description}</p>
        </div>
      </div>
    );
  });
  console.log(newEntry);
}

Answer 1

我了解您的代码中的错误。

在这里，您正在映射一个数组并返回一个 div 数组，这很好，但 javascript 不会让 newEntry 自己成为一个数组。

所以你可以做的是

 function Card(props) {
     const updatedData = props.data;
     console.log(updatedData);
     const newEntry = []
     updatedData.map(function(item) {
     newEntry.push(
      `<div className="main-container" key=${item.id}>
        <div className="main-image">
          <img src=${item.imageUrl} alt="" />
        </div>
        <div className="main-info">
          <div className="location-container">
            <img className="placeholder-logo" src="placeholder" alt="" />
            <p className="location">${item.location}</p>
            <a href=${item.googleMapsUrl}>View on Google Maps</a>
          </div>
          <h1>${item.title}</h1>
          <h4 className="dates">
            ${item.startDate}-${item.endDate}
          </h4>
          <p className="description">${item.description}</p>
        </div>
      </div>`
    );
  });
  console.log(newEntry);
}

您可以创建一个新数组并将每个元素推入该数组。

您不能将 html 存储在 javascript 中，除非您将其用作字符串。

如果你在某个地方附加这个 div，你可以只附加这个字符串，它会起作用。