JSX 元素类型错误：将类型添加到从 .map 函数返回的对象

Posted 2023-03-13

【中文标题】JSX 元素类型错误：将类型添加到从 .map 函数返回的对象

【英文标题】：JSX Element Type Error: Adding Types to object returned from .map function

【发布时间】：2020-04-29 15:34:39

【问题描述】：

我正在尝试将item 类型添加到从 .map 函数返回的对象中。但是，我遇到了 JSX 错误，我尝试将 item: JSX.Element 添加到 Item 类型，但这似乎无法正常工作。有人可以为我澄清一下吗？下面是错误、类型和代码。

错误：

src/ListPicker.tsx:69:28 - error TS2345: Argument of type '(item: Item) => JSX.Element' is not assignable to parameter of type '(value: string, index: number, array: string[]) => Element'.
  Types of parameters 'item' and 'value' are incompatible.
    Type 'string' is not assignable to type 'Item'.

      props.items.map((item: Item) => 
                              ~~~~~~~~~~~~~~~~~

类型：

// TypeScript: Types
interface Props 
  title: string,
  items: Array<string>,
  onPress: Function,
  onValueChange: Function,


interface Item 
  label: string,
  value: string,
  key: number | string,
  color: string,
;

ListPicker.tsx：

// Render ios Picker
  const renderIOSPicker = () => 
    try 
      return (
        <Picker
          selectedValue=value
          onValueChange=selectValue>
          props.items.map((item: Item) => 
            return (
              <Picker.Item
                label=item.label
                value=item.value
                key=item.key || item.label
                color=item.color
              />
            );
          )
        </Picker>
      )
    
    catch (error) 
      console.log(error);
    
  ;

【问题讨论】：

看起来你的道具将items定义为一个字符串数组，所以当映射一个字符串数组时，映射回调签名是(element: string, index: number, array: string[])。我认为如果您将items 的道具接口更新为items: Array<Item>,，它现在应该匹配。如果这是正确的，那么我可以添加为答案。

【参考方案1】：

看起来您的道具将items 定义为字符串数组，因此当映射字符串数组时，映射回调签名为(element: string, index: number, array: string[])。我想如果你将 items 的 props 接口更新为 items: Array<Item>,，它现在应该匹配了。

// TypeScript: Types
interface Item 
  label: string,
  value: string,
  key: number | string,
  color: string,
;

interface Props 
  title: string,
  items: Array<Item>, // use array of type you defined above
  onPress: Function,
  onValueChange: Function,

【参考方案2】：

这里的问题似乎是item 的类型（即在您的map 函数的参数中）与items 数组的类型（在Props 接口中定义）之间的不一致。

您的Props 接口将items 字段定义为字符串数组，而您的渲染代码期望items 字段为Item 对象数组。

如果你能够修改和重构你的代码，那么Props 被定义为：

interface Props 
  title: string,
  items: Array<Item>,
  onPress: Function,
  onValueChange: Function,

那么这应该可以解决错误。