代码之家 › 专栏 › 技术社区 › CCCC

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

next.js typescript reactjs

CCCC · 技术社区 · 3 年前

我有一个错误

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

如何修复它?

应用程序。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;

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

3 回复 | 直到 3 年前

Alonso Pablo 3 年前

您需要破坏“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}</>;
};

在“”标记中作为属性传递的任何内容都将在道具中结束( https://reactjs.org/docs/components-and-props.html )

Tushar Shahi 3 年前

您正在考虑单一属性 inputValues 成为整个道具的对象。实际上,它只是正在传递的道具对象的一个关键点。

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

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 物体,这就是我觉得你想要的。再来一次 解构 将被使用。

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

Ganesan C 3 年前

你必须通过 ({inputValues}:{inputValues:Array}) 作为你的道具是InputGroup组件。

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

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

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