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

如何使用typescript传递数字数组并作出反应

react-hooks typescript reactjs

Toontje · 技术社区 · 4 年前

我第一次在React中使用类型,我对它不是很熟悉。

我试图将子组件中的表单中的数字添加到数字数组中。

因此,我创建了一个useState钩子:

const [valuesList, setValuesList] = useState<number[]>([]);

<AddNum
        setValues={setValuesList}
      />

在子组件中,我为道具定义了一个接口:

interface AppProps {
  setValues: (value: number) => void;
}

const addNumber = (value: string): undefined => {
const num = parseInt(value);
props.setValues((prevList) => prevList.concat(num));
return undefined;

};

我在父组件中遇到此错误:

/Users/acandael/Tutorials/react/add-nums/src/components/AddNum.tsx
TypeScript error in /Users/acandael/Tutorials/react/add-nums/src/components/AddNum.tsx(21,21):
Argument of type '(prevList: any) => any' is not assignable to parameter of type 'number[]'.
  Type '(prevList: any) => any' is missing the following properties from type 'number[]': pop, push, concat, join, and 27 more.  TS2345

    19 |   const addNumber = (value: string): undefined => {
    20 |     const num = parseInt(value);
  > 21 |     props.setValues((prevList) => prevList.concat(num));
       |                     ^
    22 |     return undefined;
    23 |   };
    24 |

谢谢你的帮助

1 回复 | 直到 4 年前

subashMahapatra 4 年前

您正在尝试更改数字数组的状态值 相当于 打电话 props.setValue(num)

还包括的类型定义 setValues 接口内 AppProps 这是不正确的。TS将推断setter函数的类型 setValuesList 像 React.Dispatch<SetStateAction<number[]>> 这与类型不兼容 (value: number) => void .

正确定义 设定值 功能将是 设置值列表

interface AppProps {
   setValues: React.Dispatch<SetStateAction<number[]>>
 
   // setValues: (numArr: number[]) => void  ( this will work as well )
}

更新状态值的解决方案 valuesList 将使用函数更新或创建另一个接收 number 作为参数并更新状态。

功能更新

setValues(prev => prev.concat(num))

具有 设定值 作为一个不同的回调函数

// with this solution you don't need to modify the interface AppProps

interface AppProps {
   setValues: (num: number) => void
}

const Foo: React.FC<AppProps> = ({ setValues }) => {
  
  // component logic
  
  return (
   <>
   </>
  )
}

// in parent component
const [valuesList, setValuesList] = useState<number[]>([])

const updateWithNewValue = useCallback((num: number) => {
   setValuesList(prev => prev.concat(num))
}, [])

// pass the updateWithNewValue as props

<Foo setValues={updateWithNewValue}/>

类似的例子 codesandbox