Javascript 我在React中映射创建的数组时遇到问题，正在尝试传播它（但没有效果）

我在这里设置了一个系统，单击“保存”按钮可以获取一个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;

import React，{useState}来自“React”；
导入“/Favorites.css”；
从“html到图像”导入html图像；
从“react-file-base64”导入FileBase64；
功能收藏夹（道具）{
const[files，setfiles]=useState（[]）；
const newspreadarray=[…文件]；
常量getimage=（）=>{
var htmlToImage=require（“html到图像”）；
var节点=document.getElementById（“mymodal153”）；
HTML图像
.toPng（document.getElementById（“mymodal153”），{quality:0.01}）
.then（函数（dataUrl）{
var img=新图像（）；
img.src=数据URL；
log（dataUrl）；
让newarray=files；
push（dataUrl）；
log（newarray）；
setfiles（newarray）；
})
.catch（函数（错误）{
console.error（“哎呀，出问题了！”，error）；
});
};
返回(
节省&减少；
酷
嗨，这是一些示例文本

{newspreadarray.map（（post，index）=>(
//我们可以在这里调整尺寸：）
))}
);
}
导出默认收藏夹；

问题在于您正在改变状态

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

您应该创建一个新的数组引用

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

你可以简单地

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

{files.map（（post，index）=>(
//我们可以在这里调整尺寸：）
))}

太棒了，谢谢你修复了它。我认为如果我给这个州一个新的名字或变量，我就不会改变它。问题在于新变量仍然包含原始的唯一状态属性。@GrahamThomas否，这是因为react使用浅层引用相等来帮助协调UI已更改且需要刷新到DOM中的情况。基本上当你

让newarray=files

文件

现在

newarray

引用内存中的同一对象。对

newarray

的更新也会更新

文件

，但由于它仍然是相同的引用，react不会对更改做出“反应”。如果您的问题得到了充分的回答，请随时接受，如果您觉得有帮助，请进行投票。精彩的解释！谢谢你我接受了！祝你有美好的一天！

const newspreadarray = [...files];

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