javascript - 我想显示所有图像预览，但每当我上传新图像时，旧图像就会消失

Question

正如我上面的标题所说，我遇到了一个问题。我有 4 个输入文件类型，它必须分为 4 个按钮，但每当我尝试上传新文件时，旧的预览就消失了，但它仍然在那里。我使用reactjs来制作这个。

每当我尝试在这里搜索时，它总是关于多个图像上传预览。但我尝试做的是一张一张上传并全部预览。

我已经在这里制作了一个codesandbox:https://codesandbox.io/s/happy-bardeen-q89rr?fontsize=14

有人可以帮我解决这个问题吗？我做了一些技巧将其保存在本地存储中，但它仍然不起作用

Answer 1

问题在于状态集或结构，具体取决于观点。

这是您的初始状态:

state = {
  form: {
    frontDesign: [],
    backDesign: [],
    leftDesign: [],
    rightDesign: []
  }
};

但是，每次使用新值更新时，您都会覆盖以前的值

    this.setState(state => ({
      ...state,
      form: {
        frontDesign: [reader.result]
      }
    }));

请注意，state 已包含表单对象，您只需使用 form { frontDesign: value } 设置新状态，如上例所示。

您要么摆脱表单对象包装器，要么以这种方式设置状态

  this.setState(state => ({
    form: {
      ...state.form,
      frontDesign: [reader.result]
    }
  }));

注意...state.form 传播。

如有其他问题，请告诉我。