将类型化的 useState Hook 传递给读取为未定义的子组件，即使 defaultState 未定义

Question

我有以下一段代码，它是整个代码的片段。基本上我正在尝试拥有一个表单，可以选择在单击按钮时创建相同表单的多个条目。目的是将数据存储在对象数组中，其中每个对象代表一种形式。

父组件

export interface IExperience {
    position: string,
    location: string, 
    startDate: string,
    endDate: string,
    description: string
}

const Experience = () => {
    let [preview,setPreview] = useState(false)
    let [data,setData] = useState<IExperience[]>([{position: '', location: '', startDate: '', endDate: '', description: ''}]) // Default state is not undefined
    let [button,setButton] = useState('Edit')

    return (
        <div className={styles.visitorContainer}>
            <Nav />
            {preview ? <Message setPreview={setPreview} data={data} setData={setData} /> : <Preview setPreview={setPreview} data={data} setData={setData} button={button} setButton={setButton}/>}
            <Foot />
        </div>
    )
}
 
export default Experience

忽略预览部分，因为它对我面临的问题来说是多余的。

子组件

import React from 'react'
import { ReactNode, useState } from 'react'
import { IExperience } from '.'
import { Preview } from './preview'

export const Message = ( { setPreview }: any, { data,setData }: any ) => {
    let [count,setCount] = useState(0)
    let formRows: ReactNode = []

    const formHandler = (i:number) => {
        console.log(data) //Console log here also shows data is undefined

        return formRows = [
             (<div key={`innerDiv${i}`}>
                <div><h2>Entry {i+1}</h2></div>
                <div>
                    <label>Position</label>
                    <input type="text" placeholder='Engineer' onChange={(e) => setData({...data,position: e.target.value})} value={data.position} /> //Error is here (data is undefined)
                </div>
            </div>)
         ]
    }

    const updateHandler = () => {
        setCount(prev => prev+1)
    }

    return (
        <div>
            <div>
                <div>
                </div>
                <form onSubmit={(e) => sendData(e)}>
                    {[...Array(count+1)].map((d,i) => (<div key={`outerDiv${i}`} >{formHandler(i)}</div>))}
                    <div>
                        <input type="button" value='+' onClick={() => updateHandler()} />
                    </div>
        
                </form>
            </div>
        </div>
    )
}

我再次省略多余的内容，以便它始终专注于问题。

过去几天我一直在研究这个问题，但我无法在网上找到解决方案，所以我求助于发布我自己的问题。

希望代码清晰:)

Answer 1

React 组件只需要一个 props 对象。您的代码段中的 Message 组件有两个参数。

export const Message = (
  { setPreview }: any,  // arg 1
  { data, setData }: any // arg 2 undefined!
) => {

您应该解构第一个参数 props 对象中的所有道具。请 double-check 类型，因为我对 Typescript 不是很熟悉。

interface I_Message {
  setPreview: React.Dispatch<SetStateAction<boolean>>,
  data: IExperience[],
  setData: React.Dispatch<SetStateAction<IExperience>>
}

export const Message = ({ setPreview, data, setData }: I_Message) => {
  ...

将类型化的 useState Hook 传递给读取为未定义的子组件，即使 defaultState 未定义

Passing down a Typed useState Hook to a child component reading as undefined even when defaultState is not undefined

forms

typescript

react-hooks