如何在React JS中的函数调用后获得响应

Question

嗨，我正在调用一个函数，然后试图获得响应，但它说未定义。我正在将该响应从父组件传递到子组件。

组件代码为-

import React from 'react';
import {One, test, test1} from './Sample/SampleData';
let data:DataInterface = One;
const onChangeId = (Id:string) => {
switch (Id) {
case '1':
data = test
break;
case '2':
data = test1
break;
default:
data = One;
break;
}
console.log(data, " Data")
}
export const Test = () => {
return (
<div>
<ParentComponent
firstData={One} 
onChangeId={onChangeId} 
secondData={data}
/>
</div>
);
};

父组件代码为-

import React from 'react';
export const ParentComponent = ({
firstData,
onChangeId,
secondData
}: NewInterface) => {
const [format, setFormat] = useState(secondData);
const onChange = (
type: string,
val:string
) => {

if (type === "welcome) {
onChangeId(val);
setTimeout(() => {
setFormat(secondData)
}, 2000)

console.log(secondData , "secondData")

}

};
return (

<React.Fragment>                
<ChildComponent
onChange={onChange}
firstData={firstData}
newData={format}
/>
</React.Fragment>

);
}

当第一个tie组件渲染时，我得到的是secondData，但当我调用onChangeId事件时，我获得的是未定义的secondData。那么我该如何解决这个问题呢？

注意：我们不能创建单独的onChangeId事件，它必须在onChange函数内，因为我也在ChildComponent中做一些其他工作。

Answer 1

将useState钩子移到onChange方法之外

export const ParentComponent = ({
firstData,
onChangeId,
secondData
}: NewInterface) => {
const [format, setFormat] = useState(secondData);
const onChange = (
type: string,
val:string
) => {
if (type === "welcome") {
onChangeId(val);
setTimeout(() => setFormat(secondData), 2000)

console.log(secondData , "secondData")        
}
};