Mengapakah status ini menunggu sehingga status lain dikemas kini atau muat semula pantas untuk dikemas kini? - React/NextJS

Question

EDIT: Versi seterusnya ialah 13.3.0

Saya mempunyai keadaan yang dipanggil localArray dan saya hanya mahu mengemas kini kepada indeks tertentu, jadi saya terfikir untuk mencipta pembolehubah masa untuk mengubah suai tatasusunan itu dan mengemas kini keadaan dengan nilai masa, masalahnya, keadaan ini tidak dikemas kini sehingga yang lain negeri dikemas kini atau selepas muat semula pantas Ia akan dikemas kini, saya tidak tahu mengapa ini berlaku

Berikut ialah contoh minimum yang boleh dihasilkan semula:

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

Seperti yang anda boleh lihat, selepas keadaan tatasusunan dikemas kini, elemen pertama sepatutnya muncul pada perenggan, tetapi tidak sehingga kes cis dijelaskan

Answer 1

React dibina atas andaian bahawa keadaan tidak berubah. Anda sedang memutasi tatasusunan sedia ada, bukan mencipta tatasusunan baharu, jadi selepas menetapkan keadaan, React membandingkan keadaan sebelum dan selepas, mendapati ia adalah tatasusunan yang sama, dan oleh itu berpendapat tiada apa-apa yang berubah. Jadi ia tidak akan dipaparkan semula.

Sebaliknya, buat salinan tatasusunan dan ubah suainya:

const handleArrayChanges = ({ target: { name, value } }) => {
  let newArray = [...localArray]; // <--- creating a shallow copy
  newArray[Number(name)] = value;
  setLocalArray(newArray);
};