第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

將狀態(tài)重置為初始值而不是最近更新的狀態(tài)

將狀態(tài)重置為初始值而不是最近更新的狀態(tài)

桃花長相依 2023-02-17 16:29:16
如后續(xù)重新渲染期間的文檔中所述,返回的第一個(gè)值useState將始終是應(yīng)用更新后的最新狀態(tài)。但是,我有一個(gè)用例,其中狀態(tài)需要在后續(xù)重新渲染期間重新初始化為道具中提供的初始值。將此示例視為我的用例的簡化版本: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>  );}您也可以檢查代碼和框。當(dāng)我增加第一個(gè)計(jì)數(shù)器時(shí),我希望將第二個(gè)計(jì)數(shù)器重置為 0 或 1(無論它是什么狀態(tài)),具體取決于第一個(gè)計(jì)數(shù)器中的計(jì)數(shù)是偶數(shù)還是奇數(shù)。請(qǐng)注意,只有單向依賴,沒有任何循環(huán)的意義;更改第二個(gè)計(jì)數(shù)器中的計(jì)數(shù)不應(yīng)重置第一個(gè)計(jì)數(shù)器中的計(jì)數(shù)。
查看完整描述

1 回答

?
喵喵時(shí)光機(jī)

TA貢獻(xiàn)1846條經(jīng)驗(yàn) 獲得超7個(gè)贊

來自 React 組件文檔

如果您想在 prop 更改時(shí)“重置”某些狀態(tài),請(qǐng)考慮......用鍵完全不受控制。

在要重置為初始狀態(tài)的組件上使用反應(yīng)鍵。

當(dāng)?shù)谝粋€(gè)更新時(shí),您可以將其用作要重置的countOne第二個(gè)的密鑰。提供作為第二個(gè)的初始值。刪除重復(fù)的狀態(tài),因?yàn)樗遣槐匾?。并使回調(diào)可選,但將新的狀態(tài)值傳遞給回調(diào),即,或使用效果來處理它,否則狀態(tài)值將不同步。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>

  );

}

如果您不想使用反應(yīng)鍵來重置為初始狀態(tài),那么您可以提供另一個(gè)道具作為第二個(gè)useEffect鉤子中的依賴項(xiàng)以重置為提供的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道具,以便在更新時(shí)重置計(jì)數(shù)countOne。


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


查看完整回答
反對(duì) 回復(fù) 2023-02-17
  • 1 回答
  • 0 關(guān)注
  • 134 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)