Question

const imagesRowOne = [
  {
    src: [
      "/images/myreadinglist.png",
      "/images/portfolio placeholder.jpg",
      "/images/portfolio placeholder.jpg",
      "/images/portfolio placeholder.jpg"
    ]
  },
  { href: ["https://my-reading-list-and-wishlist.herokuapp.com/"] }
];

const imagesRowTwo = [
  "/images/portfolio placeholder.jpg",
  "/images/portfolio placeholder.jpg",
  "/images/portfolio placeholder.jpg",
  "/images/portfolio placeholder.jpg"
];

const Projects = ({ className }) => (
  <div className={`project-section ${className}`}>
    <div className="projectflex">
      {imagesRowOne.map((img, i) => (
        <a className="projectsrowone" key={i}>
          <img
            className="img-responsive"
            src={img[0][1]}
            href={img[0][2]}
            alt="projectthumbnail"
          />
          {console.log(img)}
        </a>
      ))}
    </div>
    <div className="projectflex">
      {imagesRowTwo.map((img, i) => (
        <a className="projectsrowtwo" key={i}>
          <img className="img-responsive" src={img} alt="projectthumbnail" />
        </a>
      ))}
    </div>
  </div>
);
export default Projects;

我在这个问题上苦苦挣扎了几周，仍在努力理解数组方法并在对象操作中不断发展，这是我的弱点，但是我在这里要做的基本上是从我的src属性映射图像对象，然后将我href属性中的链接也映射为与每个图像完全相同的顺序，因此链接索引0将与图像索引0一起出现，我在做任何有帮助的工作时都错了我尝试了不同的值来尝试使用嵌套数组方面无济于事，以及尝试在地图中调用对象属性，我对此感到非常困惑。

Answer 1

我也是新手，所以也许有很多方法可以改善此答案，所以请记住这一点。这就是我解决此问题的方式；

// Extract src and href from imagesRowOne 
const arrayEntries = Object.entries(Object.values(imagesRowOne));
const src = Object.values(arrayEntries[0][1])[0];
const href = Object.values(arrayEntries[1][1])[0];

// populate each image with the href.  
{src.map((img, i) => (
<a className="projectsrowone" key={i}>
  <img
    className="img-responsive"
    src={img}
    href={href[0]}
    alt="projectthumbnail"
  />
  {console.log(img)}
</a>
)

ECMA2017功能：Object.values（your-obj），Object.entries（your-obj）

努力为我的映射数组添加链接。反应路由器

1 个答案: