将图像 Blob 添加到现有数组并更新状态

Question

您好，我正在尝试从字符串异步加载 blob 图像，然后将该图像输入到现有的数组中，该数组将所述图像映射为 img 标签。

来来回回几个小时后，我要试着看看我是否能理解如何提问。我已将问题与此隔离，为了通过我拥有的方法以我想要的方式呈现图像，我必须有效地从表单中删除任何其他更新该数组的 onChange。

我需要的是对图像的字符串引用 => 如果图像存在，则在进行更改时添加此位，该位是带有图像的 jsx 标记 => 将数组与另一个组件中的 jsx 标记映射 => 更新相同包含操作图像而不从对象中移除图像的信息的数组。

使用 onclick 并且在表单中没有其他 onchange 方法，然后解锁我的一张地图最终将在屏幕上显示图像，因此后端没有任何内容只是让这个愚蠢的地图对自己有意义.我提前为代码道歉...

  const sectionImg = {
    name: "",
    sectionArea: "",
    alt: "",
    background: "",
    code: "",
    height: "",
    width: "",
    sectionOrdinality: 0,
  };

const [img, setImg] = useState([...sectionImg]);

为简洁起见，我删除了部分代码，但映射了

        {img.map((row, i) => {
          let delCheck = 1;
          const index = img.findIndex((x) => x === row);
           
          return (
            <div
              style={{ width: "200px" }}
              key={i}
              className='row card bg-dark'>
              <h3>{row.sectionArea} Image</h3>
              {Object.keys(row).map((key) => (
                <div>
                  <form onSubmit={(e) => e.preventDefault()}>
                    {key === "sectionArea" ? (
                      <select
                        name='sectionArea'
                        onChange={(e) => onChangeImg2(i, e)}>
                        <option>Section Position...</option>
                        <option value='topLeft'>Top Left</option>
                        <option value='topCenter'>Top Center</option>
                        <option value='topRight'>Top Right</option>
                        <option value='middleRight'>Middle Right</option>
                        <option value='middleCenter'>Middle Center</option>
                        <option value='middleLeft'>Middle Left</option>
                        <option value='bottomRight'>Bottom Right</option>
                        <option value='bottomCenter'>Bottom Center</option>
                        <option value='bottomLeft'>Bottom Left</option>
                      </select>
                    ) : (
                      ""
                    )}

                    {key === "background" && pallet ? (
                      <select
                        name='background'
                        onChange={(e) => onChangeImg2(i, e)}>
                        <option>Background Color...</option>
                        <option value={pallet.primary}>Primary</option>
                        <option value={pallet.dark}>Dark</option>
                        <option value={pallet.light}>Light</option>
                        <option value={pallet.danger}>Danger</option>
                        <option value={pallet.primary}>Success</option>
                      </select>
                    ) : (
                      ""
                    )}

                    {key === "name" ? (
                      <div className='grid-2'>
                        <input
                          type='text'
                          placeholder='name...'
                          value={row[key]}
                          name={key}
                        />

                        <span style={{ float: "right" }}>
                          <button
                            type='button'
                            className='btn btn-sm'
                            onClick={(e) => {
                              getContentImage(currentContent);
                              onChangeImg(i, e, currentContent);
                              clearCurrentContent();
                            }}>
                            Add Content
                          </button>
                        </span>
                      </div>
                    ) : (
                      ""
                    )}
                    {key === "width" ? (
                      <input
                        type='text'
                        placeholder='Width'
                        value={row[key]}
                        name={key}
                        onChange={(e) => onChangeImg2(i, e)}
                      />
                    ) : (
                      ""
                    )}
                    {key === "height" ? (
                      <input
                        type='text'
                        placeholder='Height'
                        value={row[key]}
                        name={key}
                        onChange={(e) => onChangeImg2(i, e)}
                      />
                    ) : (
                      ""
                    )}
                  </form>
                </div>
              ))}
            </div>
          );
        })}

   const {image} = useContext(imageContext)
  const onChangeImg = (i, e, currentContent) => {
    
    const { value, name } = e.currentTarget;
    let newResults = [...img];

    if (typeof currentContent === "string" && image !== null) {
      newResults[i] = {
        ...newResults[i],
        ["name"]: currentContent,
        code: (
          <img
            src={URL.createObjectURL(new Blob([image], { type: "img/png" }))}
            alt=''
          />
        ),
      };
      setImg(newResults);
    }
  };

  const onChangeImg2 = (i, e) => {
    const { value, name } = e.currentTarget;
    let newResults = [...img];

    newResults[i] = {
      ...newResults[i],
      [name]: value,
    };

    console.log(newResults[i]);

    // setImg(newResults);
  };

              {img
                .filter((h) => h.name != "")
                .filter((h) => h.sectionArea === "topLeft")
                .map(({ code }) => code)}