Question

我处于以下状态

const [thumbnail, setThumbnail] = useState({
  id: null,
  image: 'https://via.placeholder.com/200x100'
});

我可以在handleChange函数中设置缩略图，例如

fetch(`/category/${id}`, {
  method: 'PUT',
  body: formData
})
  .then(res => res.json())
  .then(response =>
    setThumbnail({ id: response.id, image: response.thumbnail })
  );

如何获取缩略图以在类似的地图中显示

{data &&
  data.map((category: CategoryInterface) => (
    image={}

<input
  accept="image/*"
  hidden
  ref={ref =>
    (inputRefs[
      category.id
    ] = ref as HTMLInputElement)
  }
  type="file"
  onChange={e => handleChange(e, category.id)}
/>
<IconButton
  onClick={() => handleClick(category.id)}
>

因此，基本上，我想默认显示category.thumbnail，如果不存在占位符，则显示占位符。如果更改缩略图，则仅应更改更改的缩略图，但是如果我设置了{ thumbnail内的{1}}状态会将所有缩略图更改为我设置的缩略图，有没有办法只更改特定的缩略图？

Answer 1

已修复以下问题

const [data, setData] = useState([] as CategoryInterface[]);
const [loading, setLoading] = useState(false);

useEffect(() => {
  fetch('/categories')
    .then(res => res.json())
    .then(response => setData(response));
}, [loading]);

// This part is called inside a map
setLoading(true);
// fetch
.then(() => setLoading(false));

// This part is inside a map
image={
  data.find(c => c.id === category.id)!.thumbnail ||
  'https://via.placeholder.com/200x100'
}

在地图中具有条件的useState

1 个答案: