Tajuk yang ditulis semula ialah: Kemas kini awal keadaan React tidak berlaku

Question

Saya mempunyai komponen muat naik imej di mana pengguna boleh memuat naik satu atau lebih imej pada satu masa. Saya sentiasa cuba menggunakan useState() untuk mengemas kini keadaan apabila pengguna memuat naik imej. Tetapi status itu tidak dikemas kini serta-merta. Bagaimanakah saya boleh mengemas kini kod berikut untuk menjadikannya berfungsi dengan baik.

import React from 'react';
import './style.css';
import React, { useState } from 'react';

export default function App() {
  const [file, setFile] = useState([]);

  const uploadImages = (event) => {
    console.log('NewFile=>', event.target.files);

    setFile([...file, ...event.target.files]);
    console.log('UpdatedFiles=>', file);
  };
  return (
    <div>
      <input
        multiple
        type="file"
        name="photo"
        id="photo"
        accept="image/*"
        capture="environment"
        onChange={(event) => uploadImages(event)}
      />
    </div>
  );
}

https://stackblitz.com/edit/react-ujcbjh?file=src%2FApp.js

Answer 1

Anda harus berhati-hati apabila anda menggunakan useState dengan jenis bukan primitif.

Dua halaman daripada dokumentasi React ini akan memberi anda beberapa arahan:

• https://react.dev/learn/updating-objects-in-state
• https://react.dev/learn/updating-arrays-in-state

Ringkasnya, bertindak balas menggunakan Object.is 来确定在调用 setState untuk menentukan sama ada keadaan telah berubah. Untuk objek dan tatasusunan, ini mungkin kembali benar walaupun kandungannya berubah.

Answer 2

Dalam React, cangkuk useState tidak mengemas kini keadaan serta-merta. Kemas kini status adalah tidak segerak, yang bermaksud bahawa nilai status yang dikemas kini mungkin tidak tersedia serta-merta selepas memanggil fungsi penetap status.

Untuk menyelesaikan masalah ini, anda boleh menggunakan cangkuk useEffect untuk mendengar perubahan dalam keadaan fail dan melakukan sebarang tindakan yang perlu apabila dikemas kini. Berikut ialah versi kod yang dikemas kini yang termasuk cangkuk useEffect:

import React, { useState, useEffect } from 'react';
import './style.css';

export default function App() {
  const [file, setFile] = useState([]);

  const uploadImages = (event) => {
    console.log('NewFile=>', event.target.files);
    setFile([...file, ...event.target.files]);
  };

  useEffect(() => {
    console.log('UpdatedFiles=>', file);
  }, [file]);

  return (
    <div>
      <input
        multiple
        type="file"
        name="photo"
        id="photo"
        accept="image/*"
        capture="environment"
        onChange={(event) => uploadImages(event)}
      />
    </div>
  );
}

Dalam kod yang dikemas kini ini, kami menambahkan cangkuk useEffect yang mendengar perubahan dalam keadaan fail dengan menentukan fail sebagai kebergantungan dalam tatasusunan parameter kedua cangkuk useEffect. Setiap kali status fail dikemas kini, kod di dalam fungsi panggil balik useEffect dilaksanakan. Anda boleh melakukan sebarang operasi yang diperlukan menggunakan nilai fail yang dikemas kini dalam cangkuk useEffect.

Dengan menggunakan cangkuk useEffect, anda akan melihat nilai status yang dikemas kini dilog dengan betul selepas kemas kini status.