在 JSON 响应中访问嵌套数组。打字稿-ReactJS答案

【问题标题】：Accessing nested array in JSON response. Typescript-ReactJS在 JSON 响应中访问嵌套数组。打字稿-ReactJS
【发布时间】：2021-03-02 02:56:46
【问题描述】：

我已经阅读了一些其他类似问题的问题，但我不知道如何解决这个问题。我的代码写的有点不同，我对 Typescript 了解不多，几个月前才开始学习。

我构建了一个公开 API 的后端。我可以调用它并返回：

{
    "content": [
        {
            "id": 1,
            "name": "Abantza",
            "origin": {
                "id": 2,
                "name": "Brazil"
            },
            "meaning": "",
            "gender": "FEMALE"
        },
        //more results....

我可以使用第一个数组的信息（数据作为名称、含义、性别）呈现我的表格，但我无法打印 origin.name 信息。

我尝试过类似的东西 <td>{nameData.origin[0]}</td> {nameData.origin.map(x => (<td>{x.name}</td>))} 没有成功。

我在 React 中的代码是：

const Search = () => {

   const [nameResponse, setNameResponse] = useState<NameResponse>();

   useEffect(() => {
      const params = {
         page: 0,
         linesPerPage: 12
      }
      makeRequest({ url: '/names', params })
         .then(response => setNameResponse(response.data))
   }, [])

   return (
      <div className="search-container">
         <div className="search-result">
            <h3 className="search-result-title">Search results</h3>
            <table className="table table-striped table-hover table-sm" cellPadding="0" cellSpacing="0">
               <thead className="thead-dark">
                  <tr>
                     <th>NAME</th>
                     <th>MEANING</th>
                     <th>GENDER</th>
                     <th>ORIGIN</th>
                  </tr>
               </thead>
               <tbody>
                  {nameResponse?.content.map(nameData => (
                     <tr key={nameData.id}>
                        <td>{nameData.name}</td>
                        <td>{nameData.meaning}</td>
                        <td>{nameData.gender}</td>
                        <td>ORIGIN</td>             
                     </tr>
                  ))}
               </tbody>
            </table>
         </div>
      </div>
   )
}

console.log(nameResponse):

{content: Array(12), pageable: {…}, totalPages: 2, totalElements: 14, last: false, …}
content: Array(12)
0:
gender: "FEMALE"
id: 1
meaning: ""
name: "Abantza"
origin:
id: 2
name: "Brazil"
__proto__: Object
__proto__: Object
1: {id: 2, name: "Abarne", origin: {…}, meaning: "Ramos (es)", gender: "FEMALE"}
2: {id: 3, name: "Abauntza", origin: {…}, meaning: "", gender: "FEMALE"}

编辑：添加 Name.ts ：

export type NameResponse = {
   content: NameData[],
   totalPages: number
}

export type NameData = {
   id: number,
   name: string,
   meaning: string,
   gender: string,
   origin: Origin[]
}

export type Origin = {
   id: number,
   name: string
}

【问题讨论】：

origin 不是一个数组，它是一个对象。你不能使用索引访问它的值。您可以简单地使用 {nameData.origin.name}
我也试过@Dante_97。但是 VSCode 说：“Origin[] 类型上不存在属性“名称”......虽然我在 .ts 文件中定义了其他类型：export type Origin = { id: number, name: string }
"Origin[]" 表明您的类型错误。但是您没有将它们包括在您的问题中。
没错，因为我认为这是正确的。刚刚在问题中包含了我的类型文件内容。
您将origin 定义为一个数组，但它是一个对象。将origin: Origin[] 更改为origin: Origin。

标签： json reactjs typescript

【解决方案1】：

正如@str 所指出的，问题在于我对起源的定义是错误的。一旦从origin: Origin[]（数组）更改为origin: Origin（对象），它就起作用了。
再次感谢@str！

【讨论】：