Reactjs React钩子中的状态不会立即更改

我在调用onChange事件后正在更改状态，该事件不会立即反映。我怎样才能立即改变我的状态。 这是我的父组件代码

import React from 'react';
import {One, test, test1} from './Sample/SampleData';

export const FirstUser = () => {
    const [data, setData] = React.useState(One)
    const [id, setId] = React.useState("")
    
    React.useEffect(()=> {
            onChangeId(id)
    },[id])

const onChangeId = (myId:string) => {
    setId(myId)
    switch (myId) {
        case '1':
            setData(test);
            break;
        case '2':
            setData(test1);
            break;
        default:
            setData(One);
            break;
    }
}
    return (
        <div>
            <ChildComponent
                firstData={One} 
                onChangeId={onChangeId} 
                secondData={data}
            />
        </div>
    );
};

从“React”导入React；
从“./Sample/SampleData”导入{One，test，test1}；
export const FirstUser=（）=>{
const[data，setData]=React.useState（一个）
const[id，setId]=React.useState（“”）
React.useffect（（）=>{
onChangeId（id）
}，[id]）
const onChangeId=（myId:string）=>{
setId（myId）
开关（myId）{
案例“1”：
setData（测试）；
打破
案例“2”：
setData（test1）；
打破
违约：
setData（一个）；
打破
}
}
返回(
);
};

下面是我的ChildComponent代码-

import React from 'react';

export const ChildComponent = ({
    firstData,
    onChangeId,
    secondData
}: NewInterface) => {
const [format, setFormat] = useState(secondData);
const onChange = (
        type: string,
        val:string
    ) => {
        
        if (type === "welcome") {
                onChangeId(val);
                setFormat(secondData);                
                console.log(secondData , "secondData")                
        }
    };
    return (
        
            <React.Fragment>                
                <AnotherChildComponent
                    onChange={onChange}
                    firstData={firstData}
                    newData={format}
                />
            </React.Fragment>
    
    );
}

从“React”导入React；
导出常量ChildComponent=({
第一数据，
一旦改变，
第二数据
}：NewInterface）=>{
const[format，setFormat]=useState（secondData）；
const onChange=(
类型：字符串，
瓦尔：字符串
) => {
如果（类型==“欢迎”）{
onChangeId（val）；
setFormat（第二数据）；
console.log（secondData，“secondData”）
}
};
返回(
);
}

另一个ChildComponent的代码为-

import React from 'react';

export interface SomeInterface {
    onChange: (
        type: string,
        val:  string
    ) => void;
    
    firstData: DataInterface,
    newData: DataInterface
}

export const AnotherChildComponent = ({
    onChange,
    firstData,
    newData
}: SomeInterface) => {
    let { oneData, twoData } = firstData;
    let { thirdData } = newData;

    const translatedOneData = oneData.map(({ label, value }) => ({
        label: translateFn!(label),
        value
    }));

    const translatedTwoData = twoData.map(({ label, value }) => ({
        label: translateFn!(label),
        value
    }));

    const translatedThreeData = thirdData.map(({ label, value }) => ({
        label: translateFn!(label),
        value
    }));
console.log(newData, "newData")
    return (
        <React.Fragment>
                
                    <Grid container>
                        <Select
                            options={translatedTwoData}
                            value={selectedTwoData}                         
                            onChange={(val: string) =>
                                onChange('welcome', val)
                            }
                        />
                        <SectionLabel label="Newdata" />
                        <Select
                            options={translatedThreeData}
                            value={selectThirdData}
                            onChange={(val: string) =>
                                onChange('guest', val)
                            }
                        />
                    </Grid>
                
            
        </React.Fragment>
    );
};

从“React”导入React；
导出接口接口{
一旦改变：(
类型：字符串，
瓦尔：字符串
)=>无效；
firstData:DataInterface，
newData:DataInterface
}
导出常量另一个ChildComponent=({
一旦改变，
第一数据，
新数据
}：SomeInterface）=>{
设{oneData，twoData}=firstData；
设{thirdData}=newData；
const translatedEndata=oneData.map（{label，value}）=>({
标签：translateFn！（标签），
价值
}));
const translatedTwoData=twoData.map（{label，value}）=>({
标签：translateFn！（标签），
价值
}));
const translatedThreeData=thirdData.map（{label，value}）=>({
标签：translateFn！（标签），
价值
}));
console.log（newData，“newData”）
返回(
onChange（'欢迎'，val）
}
/>
onChange（'guest'，val）
}
/>
);
};

---

设置setFormat的状态后，当我在ChildComponent中处理secondData时，它将显示第二次更改时的数据。它不会在第一次更改（立即）中显示数据。这意味着当我调用onChangeId两次时，我将获得所需的第二个数据。它不会马上出现。我使用了useEffect并逐个传递了

id&data

，但仍然在两次调用中更改了数据。有人能帮我吗？

你应该首先知道

useState

mutate回调是异步的，所以你的

console.log（…）

在调用回调后总是显示旧值。但是，我很确定UI更新工作正常，除非您向我们展示另一个孩子组件的代码

无论哪种方式，您的

console.log

将始终输出与mount time相同的值，因为mount time是在定义时输出的

---

还有一个

警告

，如果您不小心在父组件中调用

onChangeId

的方式，可能会导致递归。

React.useffect（（）=>{onChangeId（id）}，[id]）

。这不是一个好的做法，因为您将id添加为依赖项和inside useEffect，您正在更新id。@WilliamWang那么我如何才能做到这一点以实现我想要的结果，您能帮我一点忙吗？这是否回答了您的问题@Brianthonpson我已经看过了，但在我的例子中，它不起作用。如果你按照这个问题的答案去做，那么你就不会期望你提供的代码起作用。这不是React或Javascript的工作方式。是的，我想你是对的。你能帮我一点忙吗，因为我是新手。共享

另一个childcomponent

组件的代码，并清楚地说明预期的行为。我已经为

另一个childcomponent

添加了代码。更新了我的问题。