我有以下一段代碼，它是整個事情的一個片段。基本上我正在嘗試創建一個表單，可以選擇在單擊按鈕時創建相同表單的多個條目。目的是將資料存盤在物件陣列中，其中每個物件代表一種形式。
父組件
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>
)
}
我再次省略了多余的東西，以便它專注于問題。
在過去的幾天里，我有一本書正在研究這個問題，但我在網上找不到解決方案，所以我求助于發布我自己的問題。
希望這個代碼很清楚:)
uj5u.com熱心網友回復：
React 組件只接受一個 props 物件。Message您的代碼片段中的組件有兩個爭論。
export const Message = (
{ setPreview }: any, // arg 1
{ data, setData }: any // arg 2 undefined!
) => {
您應該從第一個引數props物件中解構所有道具。請仔細檢查型別，因為我對 Typescript 不是很熟悉。
interface I_Message {
setPreview: React.Dispatch<SetStateAction<boolean>>,
data: IExperience[],
setData: React.Dispatch<SetStateAction<IExperience>>
}
export const Message = ({ setPreview, data, setData }: I_Message) => {
...
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/445788.html
上一篇：如何使透明表單獲取滑鼠輸入事件？