我在映射创建的数组时遇到了问题，并且试图扩展它(但没有用)

Question

我在这里设置了一个系统，点击保存按钮，抓取一个div，并使一个可用的图像文件。我知道这很有效，因为我已经让它与个人形象一起工作了。现在，我已经将它设置为用于同一图像的倍数，但我似乎无法让它映射任何东西。我一直在读关于传播的文章，我正试图这样做，但它仍然对我不起作用。我以前遇到过这场斗争，如果有人能解释一下为什么不起作用，我会很高兴的。我用的是反应钩。我也知道状态正在更新，据我所知是正确的。我大约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

问题是你在变异状态。

.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} />
))}