首頁  >  問答  >  主體

重寫後的標題為:Initial update of React state is not occurring

我有一個圖像上傳元件,用戶可以一次上傳一張或多張圖像。當用戶上傳圖像時,我總是嘗試使用 useState() 更新狀態。但狀態並沒有在第一時間更新。我如何更新以下程式碼才能使其正常工作。

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/App.js

P粉401901266P粉401901266428 天前615

全部回覆(2)我來回復

  • P粉846294303

    P粉8462943032023-09-09 19:42:28

    每當您將 useState 與非原始類型一起使用時,您應該小心。

    React 文件中的這兩頁將為您提供一些說明:

    #簡而言之,react 使用 Object.is 來決定在呼叫 setState 之間狀態是否會變更。對於物件和數組,即使其內容發生變化,這也可能傳回 true。

    回覆
    0
  • P粉596191963

    P粉5961919632023-09-09 16:14:40

    在 React 中,useState 鉤子不會立即更新狀態。狀態更新是異步的,這意味著在呼叫狀態設定函數後更新的狀態值可能無法立即可用。

    要解決此問題,您可以使用 useEffect 掛鉤來偵聽檔案狀態的更改,並在更新時執行任何必要的操作。這是程式碼的更新版本,其中包含 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>
      );
    }

    在此更新的程式碼中,我們新增了一個 useEffect 掛鉤,該掛鉤透過將 file 指定為 useEffect 掛鉤的第二個參數數組中的依賴項來偵聽檔案狀態的變更。每當檔案狀態更新時,useEffect 回呼函數內的程式碼就會執行。您可以使用 useEffect 掛鉤中更新的檔案值執行任何必要的操作。

    透過使用 useEffect 掛鉤,您應該會看到狀態更新後正確記錄了更新的狀態值。

    回覆
    0
  • 取消回覆