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

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

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

因此，我创建了一个useState钩子：

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

但是，当我尝试调用setValues钩子时：

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

})

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

<AddNum
        setValues={setValuesList}
      />

/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 | 

有人知道如何将子组件中的数字添加到父组件中的数字数组中，并让TypeScript满意吗

---

感谢您的帮助

您正试图通过调用

props.setValue（num）

将数字数组的状态值更改为数字

此外，接口

AppProps

中的

setValues

的类型定义不正确。TS将推断setter函数的类型

setValuesList

为

React.Dispatch

，该函数与类型

（值：number）=>void

不兼容

如果要将函数

setValuesList

作为道具传递，则

setValues

函数的正确定义为。

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

使用

设置值

作为不同的回调函数

// 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}/>

//使用此解决方案，您不需要修改接口AppProps
接口AppProps{
设置值：（num:number）=>void
}
const Foo:React.FC
什么是
num
？这是一个数字还是一个数字数组？@ramesthredy num是一个数字。您是否按照我更新的答案更改了接口？谢谢@subashMahapatra，我尝试使用回调函数实现您的解决方案，但随后我收到以下错误消息：错误：超出了最大更新深度。当组件在componentWillUpdate或componentDidUpdate内重复调用setState时，可能会发生这种情况。React限制嵌套更新的数量以防止无限循环。这可能是您在组件内调用
setValues
函数的结果。我这样调用setValues函数：const addNumber=（value:string）：undefined=>{const num=parseInt（value）；props.setValues（num）；return undefined；}；这是一个一切正常的例子。尝试用最少的问题示例编辑沙盒。谢谢@subashMahapatra，我找到了问题。应该像这样调用我的addNumber函数：onClick={（）=>addNumber（props.value）}
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}/>