Warum wartet dieser Status, bis ein anderer Status aktualisiert wird oder eine schnelle Aktualisierung erfolgt? - Reagieren/NextJS

Question

EDIT: Die nächste Version ist 13.3.0

Ich habe einen Status namens localArray und möchte nur auf einen bestimmten Index aktualisieren. Deshalb habe ich mir überlegt, eine Zeitvariable zu erstellen, um dieses Array zu ändern und den Status mit dem Zeitwert zu aktualisieren. Das Problem ist, dass dieser Status erst bei einem anderen aktualisiert wird Der Status wird aktualisiert oder nach einer schnellen Aktualisierung wird er aktualisiert. Ich weiß nicht, warum das passiert

Hier ist ein minimal reproduzierbares Beispiel:

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

Wie Sie sehen können, sollte nach der Aktualisierung des Array-Status das erste Element im Absatz angezeigt werden, dies geschieht jedoch erst, wenn der cis-Fall erklärt wird

Answer 1

React 建立在状态不可变的假设之上。您正在改变现有的数组，而不是创建一个新的数组，因此在设置状态后，React 会比较之前和之后的状态，发现它们是相同的数组，因此认为没有任何变化。因此它不会重新渲染。

相反，创建数组的副本并对其进行修改：

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