亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

將狀態重置為初始值而不是最近更新的狀態

將狀態重置為初始值而不是最近更新的狀態

桃花長相依 2023-02-17 16:29:16
如后續重新渲染期間的文檔中所述,返回的第一個值useState將始終是應用更新后的最新狀態。但是,我有一個用例,其中狀態需要在后續重新渲染期間重新初始化為道具中提供的初始值。將此示例視為我的用例的簡化版本:import React from "react";import "./styles.css";function Counter({ initialCount, handleChange }) {  const [count, setCount] = React.useState(initialCount);  const handleClick = (counter) => {    setCount(count + counter);    handleChange(count);  };  return (    <>      <h1>Counter {count}</h1>      <button        type="button"        onClick={() => handleClick(1)}        style={{ marginRight: "8px" }}      >        Add      </button>      <button type="button" onClick={() => handleClick(-1)}>        Subtract      </button>    </>  );}export default function App() {  const [countOne, setCountOne] = React.useState(1);  const [countTwo, setCountTwo] = React.useState(countOne % 2);  return (    <div className="App">      <Counter        initialCount={countOne}        handleChange={(val) => setCountOne(val)}      />      <Counter        initialCount={countTwo}        handleChange={(val) => setCountTwo(val)}      />    </div>  );}您也可以檢查代碼和框。當我增加第一個計數器時,我希望將第二個計數器重置為 0 或 1(無論它是什么狀態),具體取決于第一個計數器中的計數是偶數還是奇數。請注意,只有單向依賴,沒有任何循環的意義;更改第二個計數器中的計數不應重置第一個計數器中的計數。
查看完整描述

1 回答

?
喵喵時光機

TA貢獻1846條經驗 獲得超7個贊

來自 React 組件文檔

如果您想在 prop 更改時“重置”某些狀態,請考慮......用鍵完全不受控制。

在要重置為初始狀態的組件上使用反應鍵。

當第一個更新時,您可以將其用作要重置的countOne第二個的密鑰。提供作為第二個的初始值。刪除重復的狀態,因為它是不必要的。并使回調可選,但將新的狀態值傳遞給回調,即,或使用效果來處理它,否則狀態值將不同步。CounterCountercountOne % 2CountercountTwohandleChangecount + counter

function Counter({ initialCount, handleChange }) {

  const [count, setCount] = React.useState(initialCount);


  const handleClick = (counter) => {

    setCount(count + counter);

    handleChange && handleChange(count + counter);

  };


  // or


  useEffect(() => {

    handleChange && handleChange(count);

  }, [count, handleChange]);


  const handleClick = (counter) => {

    setCount(count + counter);

  };


  return (

    <>

      <h1>Counter {count}</h1>

      <button

        type="button"

        onClick={() => handleClick(1)}

        style={{ marginRight: "8px" }}

      >

        Add

      </button>

      <button type="button" onClick={() => handleClick(-1)}>

        Subtract

      </button>

    </>

  );

}


export default function App() {

  const [countOne, setCountOne] = React.useState(1);


  return (

    <div className="App">

      <Counter

        initialCount={countOne}

        handleChange={setCountOne}

      />

      <Counter

        key={countOne}

        initialCount={countOne % 2}

      />

    </div>

  );

}

如果您不想使用反應鍵來重置為初始狀態,那么您可以提供另一個道具作為第二個useEffect鉤子中的依賴項以重置為提供的initialValue道具。


function Counter2({ initialCount, handleChange, reset }) {

  const [count, setCount] = React.useState(initialCount);


  useEffect(() => {

    handleChange && handleChange(count);

  }, [count, handleChange]);


  useEffect(() => {

    setCount(initialCount);

  }, [reset, initialCount]);


  const handleClick = (counter) => {

    setCount(count + counter);

  };


  return (

    <>

      <h1>Counter 2: {count}</h1>

      <button

        type="button"

        onClick={() => handleClick(1)}

        style={{ marginRight: "8px" }}

      >

        Add

      </button>

      <button type="button" onClick={() => handleClick(-1)}>

        Subtract

      </button>

    </>

  );

}

傳遞countOne給reset道具,以便在更新時重置計數countOne。


<Counter2 reset={countOne} initialCount={countOne % 2} />


查看完整回答
反對 回復 2023-02-17
  • 1 回答
  • 0 關注
  • 125 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號