Reactjs 在渲染组件之前，如何正确地获取react fresh状态？

如果答案显而易见，我很抱歉。我可能错过了这样做的模式

我有这种架构（当然更复杂）： 组件（此处为按钮）具有调用函数和同时设置状态的功能。

当然，这个示例不起作用，因为在调用

speak（）

函数之前，没有定义要显示的

word

状态

最好的方法是什么

const Speaker = () => {
  const [word, setWord]=  useState ("nothing")

  const speak = () => {
    console.log(word)
    ...
  }

  const speakDirectly = () => {
    setWord("hello")
    speak() // say "nothing" instead of "hello" You could do something like this. Have a state for your word and your direct word. Use an effect for your direct word to trigger speak whenever it's updated, but call speak on click for your prepared word.

const Speaker = () => {
  const [preparedWord, setPreparedWord]=  useState();
  const [directWord, setDirectWord]=  useState();

  const speak = (word) => {
    console.log(word)
    ...
  }

  useEffect(() => directWord && speak(directWord), [directWord]);

  return (
    <>
    <p>Thinking word : {preparedWord} </p>
    <button onClick={() => setPreparedWord('Goodbye')} >Prepare to say "Goodbye"</button>
    <button onClick={() => setPreparedWord('Goodnight')} >Prepare to say "Goodnight"</button>
    ----
    <button onClick={() => speak(preparedWord)} >Speak</button> 
    <button onClick={() => setDirectWord('hello')} >Say Hello</button> 
    </>
  )

}

const Speaker=（）=>{
const[word，setWord]=useState（“无”）
const speak=（）=>{
console.log（word）
...
}
const speakdirective=（）=>{
设定词（“你好”）
speak（）//说“nothing”而不是“hello”您可以这样做。为您的单词和直接单词设置一个状态。在直接单词更新时使用效果触发speak，但在单击时调用speak以获取您准备的单词

const Speaker = () => {
  const [preparedWord, setPreparedWord]=  useState();

  const speak = (word) => {
    console.log(word)
    ...
  }

  return (
    <>
    <p>Thinking word : {preparedWord} </p>
    <button onClick={() => setPreparedWord('Goodbye')} >Prepare to say "Goodbye"</button>
    <button onClick={() => setPreparedWord('Goodnight')} >Prepare to say "Goodnight"</button>
    ----
    <button onClick={() => speak(preparedWord)} >Speak</button> 
    <button onClick={() => speak('hello')} >Say Hello</button> 
    </>
  )

}

const Speaker=（）=>{
const[preparedWord，setPreparedWord]=useState（）；
const[directWord，setDirectWord]=useState（）；
const speak=（单词）=>{
console.log（word）
...
}
使用效果（（）=>directWord&&speak（directWord），[directWord]）；
返回(
思考词：{preparedWord}

setPreparedWord（‘再见’）}>准备说“再见”
setPreparedWord（'Goodnight'）}>准备说“晚安”
----
说（准备好的词）}>说
setDirectWord（'hello'）}>打招呼
)
}

更新

仔细考虑一下，除非您需要直接单词处于您的状态，否则您也可以去掉该部分，只需在将其传递给函数时调用speak

const Speaker=（）=>{
const[preparedWord，setPreparedWord]=useState（）；
const speak=（单词）=>{
console.log（word）
...
}
返回(
思考词：{preparedWord}

setPreparedWord（‘再见’）}>准备说“再见”
setPreparedWord（'Goodnight'）}>准备说“晚安”
----
说（准备好的词）}>说
说（‘你好’）}>说你好
)
}
setWord（）
这里有一个异步的。是的，那么它是不可能的吗？我绝对需要在这些组件之间有一个独立的逻辑？不是不可能的。是的，它证实了我的想法。。。非常感谢您，您可以使用效果来回避您的问题。