在数组映射迭代器中，如何获取值连接状态和数组映射 id

Question

我从服务器获取了几张图片，然后我使用数组映射助手以及文件输入来渲染它们以上传图片。 当我选择一个文件时，我想用实际的图像替换它。

我已经初始化了一个状态存储所选图像并设置值 onChage 事件。在 jsx 中，我根据状态值在三元运算符中设置图像 url。

  function App() { 
  const [photos, setPhotos] = useState(null);
  const [upload, setUpload] = useState(null);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/photos?_start=0&_limit=2')
  .then(response => response.json())
  .then(json => setPhotos(json))
  }, [])

  const handleChange = e => {
    setUpload({...upload, [e.currentTarget.name]: URL.createObjectURL(e.currentTarget.files[0])});  
  };

  return (
    <div className="App">
      { photos ? photos.map(photo => (
          <div key={photo.id}>
            <div>
                {upload ? <img src={upload.photo_+photo.id} alt="" /> : <img src={photo.thumbnailUrl} alt="" /> }
            </div>
              <input type="file" name={`photo_${photo.id}`} onChange={handleChange} /><br /><br />
          </div>
        )) : <div>Loading...</div>
       }
    </div>
  );
}

当我选择一个图像时，什么都没有发生，应该替换实际的图像。

Answer 1

你需要使用

upload['photo_' + photo.id]

我也会用这个

{photos ? photos.map(photo => <Child photo={photo} key={photo.id} />) : <div>Loading...</div>}

所以最终应用应该是这样的

import React, { useState, useEffect } from "react";

export default function App() {
  const [photos, setPhotos] = useState(null);
  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/photos?_start=0&_limit=2")
      .then(response => response.json())
      .then(json => setPhotos(json));
  }, []);

  return (
    <div className="App">
      {photos ? photos.map(photo => <Child photo={photo} key={photo.id} />) : <div>Loading...</div>}
    </div>
  );
}

const Child = ({ photo }) => {
  const [upload, setUpload] = useState(null);
  const handleChange = e => {
    setUpload(URL.createObjectURL(e.currentTarget.files[0]));
  };

  return (
    <div>
      <div>
        {upload ? (
          <img src={upload} alt="" />
        ) : (
          <img src={photo.thumbnailUrl} alt="" />
        )}
      </div>
      <input
        type="file"
        onChange={handleChange}
      />
      <br />
      <br />
    </div>
  );
};