为什么单击仅在使用 Reactjs 单击两次后才起作用答案

【问题标题】：Why click works only after two clicks using Reactjs为什么单击仅在使用 Reactjs 单击两次后才起作用
【发布时间】：2022-12-16 10:22:09
【问题描述】：

我知道已经有一篇关于这个问题的帖子，但它看起来不像我的。

在我的应用程序中，我从 API 生成随机建议：

const Home = () => {
  const [advice, setAdvice] = useState({});

  const handleClick = async () => {
    try {
      const res = await fetch("https://api.adviceslip.com/advice");
      const data = await res.json();
      setAdvice((prevCount) => ({...prevCount, data.slip}) ); 
      console.log("my res", advice.advice)
    } catch (err) {
      console.log(err);
    }
  }
  useEffect(() => {
    handleClick();
  }, []);
  return (
    <div>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Advice generator app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
    
       <Box handleClick={handleClick} advice={advice.advice} key={advice.id} /> 
    </div>
  )
}

单击事件在另一个组件中：

 const Box = ( { handleClick, advice }) => {
      return (
          <button className='ag-advice__btn' onClick={handleClick}></button>
      )
  }

第一次显示建议，我需要点击2次才能显示下一个建议。

【问题讨论】：

您是否等待 REST API 的 HTTP 请求完成？
将其包裹在useCallback中。
console.log("my res", advice.advice) 如果此日志语句是您认为它不起作用的原因，那只是因为这行代码记录了以前的状态。如果您想注销新状态，请将您的日志语句放在组件的主体中，它会在组件重新呈现时记录。

标签： javascript reactjs fetch fetch-api

【解决方案1】：

那是因为 advise 组件还没有重新渲染，所以 advice 是空的，在第二次点击时 advice 有以前的值所以它会记录前一个

如果你想在重新渲染之前看到它的确切值，你可以在 setAdvise 函数中看到它作为 pevState 否则你可以使用 useEffect 来查看重新渲染后的内容

第一个解决方案：

  const handleClick = async () => {
    try {
      const res = await fetch("https://api.adviceslip.com/advice");
      const data = await res.json();
      setAdvice((prevCount) => ({...prevCount, data.slip}) ); 
      // to just see what is inside of advice state before rerendering
      setAdvice((prevCount) => {
         console.log("my res", prevCount?.advice)
       } ); 
     
    } catch (err) {
      console.log(err);
    }
  }

第二种解决方案：

const Home = () => {
  const [advice, setAdvice] = useState({});

  const handleClick = async () => {
    try {
      const res = await fetch("https://api.adviceslip.com/advice");
      const data = await res.json();
      setAdvice((prevCount) => ({...prevCount, data.slip}) ); 
     
    } catch (err) {
      console.log(err);
    }
  }

  useEffect(()=>{
       console.log('advice value: ',advice)
     },[advice])
   
  useEffect(() => {
    handleClick();
  }, []);
  return (
    <div>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Advice generator app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
    
       <Box handleClick={handleClick} advice={advice.advice} key={advice.id} /> 
    </div>
  )
}

【讨论】：