reactjs 子组件中传递的React父方法的状态已过时

bzzcjhmw  于 2022-12-22  发布在  React
关注(0)|答案(2)|浏览(119)

在我的App.js中,我有以下内容:

const(sound,SetSound) = useState('beep');
function playSound() {
    console.log(sound); // displays beep if called from childComponent and 'honk' if called from App.js
}
return (
<Childcomponent
    sound={sound}
    setSound={setSound}
    playSound={playSound}
/>
...

在我的ChildComponent中,我执行以下操作:

props.setSound('honk');
//Later by button click:
props.playSound();

不是按喇叭而是哔哔声。我错过了什么?
在app.js中,我按下“a”键调用playSound()。当我这样做时,它会在childComponent更新后发出喇叭声。但不知何故,props.playSound()过时了。如果我在childComponent中显示{sound},它会显示更新后的“喇叭声”。
我试过“绑定”
playSound={()=〉playSound()}但它仍然发出哔哔声而不是喇叭声。
如何从ChildComponent按喇叭?

i7uaboj4

i7uaboj41#

你的playSound()函数看起来是什么样的?看起来playSound()仍然使用sound的旧状态。
在App.js中,我会将该值传递给playSound函数,以便它使用sound的正确更新值:

function playSound(sound) {
  // Plays the sound with the argument passed in.
}
zaqlnxep

zaqlnxep2#

一旦你用'honk'值调用setSound,它就不能在同一个tick中被playSound使用,你必须等待下一个渲染周期,然后再调用props.playSound()
或者你可以这样做

// This will ensure that playSound is called after setting the state
props.setSound('honk', () => props.playSound());

相关问题