reactjs - How to get response after a function call in React JS?

Question

Hi I am calling a function then trying to get response but it is saying undefined. I am passing that response from parent component to child component.

Component code is -

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>
    );
};

Parent Component code is -

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>
    
    );
}

When first tie component renders then I am getting secondData, but when I call onChangeId event I am getting secondData as undefined. So how can I resolve this issue ?

NOTE: We can't create seperate onChangeId event it must be inside onChange function as I am doing some other works too in ChildComponent.

标签： reactjstypescript

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")        
  }
};