我在 React 中映射創建的數組時遇到問題，並試圖傳播它（但無濟於事）

Question

我在這里設置了一個系統，單擊保存按鈕會抓取一個 div 並制作一個可用的圖像文件。 我知道這很有效，因為我已經讓它與單個圖像一起工作。 我現在將它設置為與多個相同圖像一起使用，但我似乎無法將它用於 map 任何東西。 我一直在閱讀有關傳播的信息，我正在嘗試這樣做，但它仍然對我不起作用。 我以前遇到過這種斗爭，如果有人能解釋為什么這不起作用，我會很高興。 我正在使用反應鈎子。 我也知道 state 正在更新，據我所知是正確的。 我大約 99% 確定問題出在映射中。

import React, { useState } from "react";
import "./Favorites.css";
import htmlToImage from "html-to-image";
import FileBase64 from "react-file-base64";

function Favorites(props) {
  const [files, setfiles] = useState([]);

  const newspreadarray = [...files];
  const getimage = () => {
    var htmlToImage = require("html-to-image");

    var node = document.getElementById("mymodal153");

    htmlToImage
      .toPng(document.getElementById("mymodal153"), { quality: 0.01 })
      .then(function (dataUrl) {
        var img = new Image();
        img.src = dataUrl;
        console.log(dataUrl);
        let newarray = files;
        newarray.push(dataUrl);
        console.log(newarray);
        setfiles(newarray);
      })
      .catch(function (error) {
        console.error("oops, something went wrong!", error);
      });
  };

  return (
    <div>
      <span onClick={getimage} className="minize close">
        save &minus;
      </span>
      <div className="imageholder">
        <div id="mymodal153">
          <img src="https://i.imgur.com/LFXgB63.png" class="dinoimage" />
          <h1>Cool</h1>
          <p>hi this is some example text</p>
        </div>
        <div id="imageplacer"></div>
        {newspreadarray.map((post, index) => (
          //we can fiddle with sizes here :)
          <img src={post} key={index} />
        ))}
      </div>
    </div>
  );
}

export default Favorites;

Answer 1

問題是您正在變異 state。

.then(function (dataUrl) {
    var img = new Image();
    img.src = dataUrl;
    console.log(dataUrl);
    let newarray = files; // <-- reference to state
    newarray.push(dataUrl); // <-- mutation
    console.log(newarray); // <-- save same reference back to state
    setfiles(newarray);
})

或更簡潔地說

setfiles([...files, dataUrl]);

您應該創建一個新的數組引用

.then(function (dataUrl) {
    var img = new Image();
    img.src = dataUrl;
    console.log(dataUrl);
    const newarray = [...files]; // <-- spread existing state into new array
    newarray.push(dataUrl); // <-- append new element
    console.log(newarray);
    setfiles([...files, dataUrl]); // <-- save new reference to state
  })

這也是一條很沒用的線

const newspreadarray = [...files];

你可以簡單地

{files.map((post, index) => (
  //we can fiddle with sizes here :)
  <img src={post} key={index} />
))}