React TSX中无法将API返回的Array传递给其他组件，该如何解决？

问题根因 #

React 函数组件的入参永远是一个props对象，你通过<ResultTable response={response}/>传递的response是props对象上的一个属性，而非直接作为组件的第一个入参，你的两种写法都存在参数类型/结构匹配错误。

第一种写法的错误 #

const ResultTable = (response: any[]) => {

该写法将整个props对象赋值给了response变量，你实际拿到的不是你传递的数组，而是包含response属性的props对象，和你标注的any[]类型完全不匹配，因此调用组件时报错。

第二种写法的错误 #

({response}: any[]) 

你已经正确理解了需要从props对象中解构出response属性，但类型标注错误：你标注的是props对象本身为any[]（数组），但props本质是对象，数组类型上不存在response属性，因此TS无法识别该变量。

正确写法 #

简易写法（适合简单组件） #

直接标注props对象的结构即可：

const ResultTable = ({ response }: { response: any[] }) => {
// -----------code------
// ----------code------
}

规范写法（推荐，适合所有场景） #

提前定义组件的Props类型，后续维护和类型提示更友好：

// 先定义Props类型
type ResultTableProps = {
  response: any[]
  // 后续新增props属性可以直接在这里扩展
}

const ResultTable = ({ response }: ResultTableProps) => {
// -----------code------
// ----------code------
}

修改完组件定义后，你原来的组件调用代码不需要做任何调整即可正常运行。

拓展建议：如果可以明确response数组内的元素结构，建议把any替换为具体的类型定义，可以最大化利用TS的类型校验能力，减少 runtime 错误。

内容的提问来源于stack exchange，提问作者Shruti sharma