Question

typescript - 类型“IntrinsicAttributes & InputValueType[]”上不存在属性“inputValues”

2022-03-10

122

reactjs typescript next.js

我收到一个错误

TypeError: inputValues.map is not a function

在 <InputGroup/> 中，它显示警告

Type '{ inputValues: InputValueType[]; }' is not assignable to type 'IntrinsicAttributes & InputValueType[]'.
  Property 'inputValues' does not exist on type 'IntrinsicAttributes & InputValueType[]'.ts

如何修复它？

App.tsx

import React, { useState, useEffect, useRef, ChangeEvent } from "react";

import type { NextPage } from "next";

type InputValueType = {
  id: number;
  value: string;
};

const InputGroup = (inputValues: Array<InputValueType>): JSX.Element => {
  var rows: Array<any> = [];
  inputValues.map((inputValue: InputValueType) => {
    console.log(inputValues);
  });
  return <>{rows}</>;
};

const Home: NextPage = () => {
  const [inputValues, setInputValues] = useState<Array<InputValueType>>([
    { id: 0, value: "" },
    { id: 1, value: "" },
    { id: 2, value: "" },
    { id: 3, value: "" },
    { id: 4, value: "" }
  ]);

  return (
    <div className="container">
      <InputGroup inputValues={inputValues} />
    </div>
  );
};

export default Home;

Codesandbox
https://codesandbox.io/s/react-typescript-forked-077l4z?file=/src/App.tsx:0-761

Answer 1

您正在将单个属性 inputValues 视为整个 prop 对象。实际上，它只是被传递的 prop 对象的键之一。

通常，我们会为 props 定义一个接口，并在其中添加自定义键，以将它们传递给子组件。

import React, { useState, useEffect, useRef, ChangeEvent } from "react";

import type { NextPage } from "next";

type InputValueType = {
  id: number;
  value: string;
};

interface InputGroupProps {
  inputValues: Array<InputValueType>;
}
const InputGroup = ({ inputValues }: InputGroupProps): JSX.Element => {
  var rows: Array<any> = [];
  inputValues.map((inputValue: InputValueType) => {
    console.log(inputValue);
  });
  return <>{rows}</>;
};

const Home: NextPage = () => {
  const [inputValues, setInputValues] = useState<InputValueType[]>([
    { id: 0, value: "" },
    { id: 1, value: "" },
    { id: 2, value: "" },
    { id: 3, value: "" },
    { id: 4, value: "" }
  ]);

  return (
    <div className="container">
      <InputGroup inputValues={inputValues} />
    </div>
  );
};

export default Home;

上面，我使用 destructuring

Playground Link

另一种简单的实现方法是不使用接口，直接使用 props 对象，我觉得这就是你想要的。这里再次使用 destructuring 。

import React, { useState, useEffect, useRef, ChangeEvent } from "react";

import type { NextPage } from "next";

type InputValueType = {
  id: number;
  value: string;
};

const InputGroup = ({
  inputValues
}: {
  inputValues: Array<InputValueType>;
}): JSX.Element => {
  var rows: Array<any> = [];
  inputValues.map((inputValue: InputValueType) => {
    console.log(inputValue);
  });
  return <>{rows}</>;
};

const Home: NextPage = () => {
  const [inputValues, setInputValues] = useState<Array<InputValueType>>([
    { id: 0, value: "" },
    { id: 1, value: "" },
    { id: 2, value: "" },
    { id: 3, value: "" },
    { id: 4, value: "" }
  ]);

  return (
    <div className="container">
      <InputGroup inputValues={inputValues} />
    </div>
  );
};

export default Home;

Playground Link

Answer 2

您需要销毁“InputGroup”组件的“props”参数才能使用“inputValues”属性。

type InputGroupProps = {
  inputValues: Array<InputValueType>
}

const InputGroup = ({ inputValues }: InputGroupProps): JSX.Element => {
  var rows: Array<any> = [];
  inputValues.map((inputValue: InputValueType) => {
    console.log(inputValue);
  });
  return <>{rows}</>;
};

作为“”标签中的属性传递的任何内容最终都会进入 props 中（ https://reactjs.org/docs/components-and-props.html ）

Answer 3

您必须传递 ({inputValues}: {inputValues: Array}) 作为 InputGroup 组件的 props。

  const InputGroup = ({inputValues}: {inputValues: Array<InputValueType>}):JSX.Element => {

  var rows: Array<any> = [];
  inputValues.map((inputValue: InputValueType) => {
     console.log(inputValue);
  });

  return <>{rows}</>;
};