使用反應問題在瀏覽器中上傳圖像

Question

我試圖讓用戶使用 React 將幾張圖片上傳到瀏覽器（然后當然將它們保存到服務器）。

問題是當我單擊選擇圖像時，有時會起作用，有時會不起作用。 相同的顯示圖像這是我的代碼：

const [name, setName] = useState('');
const [description, setDescription] = useState('');
const [selectedFiles, setSelectedFiles] = useState([]);
const [isSelected, setIsSelected] = useState(false);

const fileSelectedHandler = (event) => {
    console.log(event.target.files[0]);
    const files = selectedFiles;
    files.push(event.target.files[0]);
    setSelectedFiles(files);
    setIsSelected(true);
    console.log(selectedFiles);
}

const fileUploadHandler = () => {
    axios.post('http://')
}

return (
    <div className="container">
        <p>Please Enter Category name: </p>
        <TextField
            id="standard-multiline-flexible"
            label="Name"
            multiline
            rowsMax={4}
            variant="filled"
            color="secondary"
            value={name}
            onChange={(event) => setName(event.target.value)}
        />
        <p>Please Enter Category Description: </p>
        <TextField
            id="standard-multiline-flexible"
            label="Description"
            multiline
            rowsMax={4}
            variant="filled"
            color="secondary"
            value={description}
            onChange={(event) => setDescription(event.target.value)}
        />
        <input type="file" onChange={fileSelectedHandler}/>
        
        {
            selectedFiles.length > 0 ?
            
                <div className="row">
                    {
                        selectedFiles.map((file, index) => {
                                console.log(file, index);
                                return (
                                    <div className="column">
                                        <img className="added_images" width="100%" src={URL.createObjectURL(file)} thumbnail />
                                    </div>
                                )
                        })
                    }
                </div>
            :
                null
        }
    </div>
)

這是我的造型：

 * {
    box-sizing: border-box;
}

.container {
    display: flex;
    flex-direction: column;
}

.column {
    float: left;
    width: 33.33%;
    height: 200px;
    padding: 5px;
}
  
/* Clear floats after image containers */
.row::after {
    content: "";
    display: table;
    clear: both;
}

當我調試時selectedFiles掛鈎包含我上傳的所有文件。 但問題是它沒有觸發渲染。 這是為什么？

Answer 1

這里的問題是您將整個selectedFiles分配給如下files

const files = selectedFiles;

這還將將selectedFiles的引用分配給files const，因此當您嘗試使用files更新selectedFiles時將新值推送到數組后，兩個數組引用將相同，因此反應不會觸發重新渲染。

為了解決這個問題，嘗試淺拷貝數組，如下所示： -

const files = [...selectedFiles];

或者在更新數組時，使用如下擴展運算符對其進行更新：-

setSelectedFiles([...files]);

或者您可以像下面這樣直接更新您的數組 state 而無需將其復制到新常量中

const fileSelectedHandler = (event) => {
    setSelectedFiles(prevSelected => [...prevSelected, event.target.files[0]]);
}