React useState 无法获取更新值

Question

单击卡时，skipStep 应将平台键的skip 设置为true（工作），changeProperty 应将流程键的值设置为web（工作），在下一个函数中，我应该能够在跳过平台时获取国家/地区的下一个位置，即部分不工作。

在下一个函数中我无法获取更新的

sortedSteps

const [steps, setSteps] = React.useState({
    email: {
        position: 0,
        label: "Email",
        optional: false,
        value: null,
        skip: false
    },
    flow: {
        position: 1,
        optional: false,
        label: "Flow",
        value: null,
        skip: false
    },
    platform: {
        position: 2,
        optional: true,
        label: "Platform",
        value: null,
        skip: false
    },
    country: {
        position: 3,
        optional: false,
        label: "Country",
        value: null,
        skip: false
    },
    campaign: {
        position: 4,
        optional: false,
        label: "Campaign",
        value: null,
        skip: false
    },
    offer: {
        position: 5,
        optional: false,
        label: "Offer",
        value: null,
        skip: false
    },
    done: {
        position: 6,
        optional: false,
        label: "Done",
        value: null,
        skip: false
    }
})

const sortedSteps = React.useMemo(() => {
    console.log(steps)
    let sorted_keys = Object.keys(steps).sort((a, b) => steps[a].position - steps[b].position);
return sorted_keys.map((key) => ({id: key, ...steps[key]}))
}, [steps])

const skipStep = async (keys) => {
// async function skipStep(keys) {
    let resetSkip = Object.fromEntries(Object.entries(steps).map(([key, val]) => [key, {...val, skip: false}]))
setSteps(resetSkip)
if(keys.length > 0) keys.map(e => {
    setSteps(steps=> ({...steps, [e]: {...steps[e], skip: true}}))
})
}

const changeProperty = async (evt) => {
// const changeProperty = (evt) => {
    let id = evt.target.name
    let value = evt.target.value
    setSteps(steps=> ({...steps, [id]: {...steps[id], value: value}}))
}
const nextStep =(n)=> {
    console.log(sortedSteps)
    console.log(abc)
    let nextStep = sortedSteps.slice(n+1, sortedSteps.length).find(elem => !elem.skip)
setStep(nextStep.position)
scrollToStep(nextStep.position)
}


<Card raised=

    disabled={f.disabled}
onClick={async (e) => {
    setIsTest(f.isTest)
await skipStep(['platform']).then()
await  changeProperty({target: {name:"flow", value: 'web'}}).then()
nextStep(1);
}}
>

Answer 1

由于 useMemo，您的下一个函数将坚持排序步骤的初始值，在这种情况下，每当排序步骤发生更改时，您都会尝试重新定义函数，

const nextStep = useCallback(
  (n) => {
    console.log(sortedSteps);
    console.log(abc);
    let nextStep = sortedSteps
      .slice(n + 1, sortedSteps.length)
      .find((elem) => !elem.skip);
    setStep(nextStep.position);
    scrollToStep(nextStep.position);
  },
  [sortedSteps]
);