使用反应问题在浏览器中上传图像

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]]);
}