国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

為什么這個(gè)狀態(tài)要等到另一個(gè)狀態(tài)更新或快速刷新后才會(huì)更新? - 反應(yīng)/NextJS
P粉232793765
P粉232793765 2023-09-08 15:09:10
0
1
696

編輯:下一個(gè)版本是 13.3.0

我有一個(gè)名為 localArray 的狀態(tài),我只想更新到特定索引,因此我想到創(chuàng)建一個(gè)時(shí)間變量來(lái)修改該數(shù)組并使用時(shí)間值更新?tīng)顟B(tài),問(wèn)題是,這個(gè)狀態(tài)直到另一個(gè)狀態(tài)更新或快速刷新后才會(huì)更新,我不知道為什么會(huì)發(fā)生這種情況

這是一個(gè)最小的可重現(xiàn)示例:

import { useState } from 'react'

function Test() 
{
    const [someState, setSomeState] = useState("");
    const [localArray, setLocalArray] = useState(["","","",""])

    const handleArrayChanges = ( { target: { name, value } } ) => {
        let newArray = localArray;
        newArray[Number(name)] = value;
        setLocalArray(newArray);
    }

    return (
        <div>
            <h4>Array state</h4>
            <textarea name='0' onChange={handleArrayChanges}/>
            <p> {localArray[0]}</p>

            <h4>Some other state</h4>
            <button onClick={() => {setSomeState("a")}}>Update some other state</button>
        </div>
      )
}

export default Test

正如您所看到的,在數(shù)組狀態(tài)更新后,第一個(gè)元素應(yīng)該顯示在段落上,但直到解釋了順式情況才顯示

P粉232793765
P粉232793765

全部回復(fù)(1)
P粉106301763

React 建立在狀態(tài)不可變的假設(shè)之上。您正在改變現(xiàn)有的數(shù)組,而不是創(chuàng)建一個(gè)新的數(shù)組,因此在設(shè)置狀態(tài)后,React 會(huì)比較之前和之后的狀態(tài),發(fā)現(xiàn)它們是相同的數(shù)組,因此認(rèn)為沒(méi)有任何變化。因此它不會(huì)重新渲染。

相反,創(chuàng)建數(shù)組的副本并對(duì)其進(jìn)行修改:

const handleArrayChanges = ({ target: { name, value } }) => {
  let newArray = [...localArray]; // <--- creating a shallow copy
  newArray[Number(name)] = value;
  setLocalArray(newArray);
};
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板