如何使用typescript在JSON对象中Map数组?

cfh9epnr  于 2023-01-03  发布在  TypeScript
关注(0)|答案(1)|浏览(132)

我尝试从JSON对象中获取一个数组,然后Map它以获取数据。下面是从API返回的数据:

{
  project: [
    {
      _createdAt: '2022-12-15T16:45:57Z',
      _id: 'cb39338d-4e6d-4c28-9a79-499afca392e6',
      _rev: '974wCYB6EQ3xW9LGNZhQvU',
      _type: 'project',
      _updatedAt: '2022-12-27T04:55:54Z',
      image: [Object],
      linkToBuild: 'https://github.com/Arotiana137-51/charitty_to_portfolio_jsp',
      summary: "This is a project I've done for learning purpose at the University. I've learned the basics of web programing  with  Java Server Pages ,Servelet ,....",      technologies: [Array],
      title: 'Charity '
    }
  ]
}

我希望Map这个数组,以便在这个JSX元素中获取它的元素:

import React from "react";
import {motion} from 'framer-motion';
import { Project } from "../typing";
import { urlFor } from "../sanity";
type Props = {
  projects:Project[];
};

function Projects({projects}: Props) {
   console.log(projects);
  return (
    <motion.div 
    initial={{opacity:0}}
    whileInView={{opacity:1}}
    transition={{duration:1.5}}
    className="h-screen relative flex overflow-hidden flex-col text-left md:flex-row max-w-full justify-evenly mx-auto items-center z-0">
      <h3 className="absolute top-24 uppercase tracking-widest text-teal-400 text-2xl ">
        Projects
      </h3>

      <div className="relative w-full flex overflow-x-scroll overflow-y-hidden snap-x snap-mandatory z-20">
       {/*----------- HERE I TRY TO ACCESS THE ARRAY AND MAP IT DIRECTLY, LIKE IN JS-----------------------------------*/} 
           { projects.project.map((project,i) => ( 
           <div className="w-screen flex-shrink-0 snap-center  flex flex-col space-y-5 items-center justify-center p-20 md:p-44 h-screen">
                <motion.img
                initial ={{
                  y: -300,
                  opacity:0
                }}
                transition={{duration: 1.2}}
                whileInView = {{opacity:1 , y:0 }}
                viewport={{ once: true}}
                
                src={urlFor(project.image).url()}
                alt="#"/>
            

            <div className=" space-y-10 px-0 md:px-10 max-w-6xl ">
                <h4 className="text-4xl font-semibold text-center">
                Case study {i+1} of{projects.length}: <span className="underline decoration-teal-700"> {project?.title}</span>
                </h4>
                <div className="flex items-center space-x-2 justify-center">
                  {
                    project?.technologies.map((technology)=>(
                      <img 
                      className="h-10 w-10"
                      key={technology._id}
                      src={urlFor(technology?.image).url()}
                      alt=""
                      />
                    ))
                  }
                </div>

                <p>{project?.summary}</p>
            </div>
            </div>
               ))}
      </div>
      <div className="w-full absolute top-[30%] bg-teal-800 left-0 h-[500px] -skew-y-12">

      </div>

    </motion.div>
  );
}

export default Projects;

这在js上正常工作,但是我的编译器返回:

Server Error
TypeError: Cannot read properties of undefined (reading 'map')

因为它仍然把prop当作一个对象,即使我试图在上面的代码中访问数组,我如何解决它呢?

nr7wwzry

nr7wwzry1#

您正在尝试创建project?. technologies.map,但正如我在上面的JSON中看到的,根本没有“技术”键。

相关问题