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

Question

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

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

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

有人可以帮我解决这个问题吗？我做了一些技巧将它保存在本地存储中，但它仍然无法正常工作

标签： javascriptreactjs

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传播。

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