问在地图中包含条件的useState
EN

Stack Overflow用户

提问于 2019-07-02 01:02:34

回答 1查看 68关注 0票数 1

我有以下状态

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和占位符，如果它不存在，如果我更改缩略图，它应该只更改我更改的缩略图，但如果我在image={}中设置thumbnail状态，它会将所有缩略图更改为我设置的缩略图，有没有方法只更改特定的缩略图？

reactjs

回答 1

Stack Overflow用户

发布于 2019-07-02 05:45:23

修复了以下问题

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'
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/56839617

复制

相似问题

问在地图中包含条件的useState
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在地图中包含条件的useStateEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在地图中包含条件的useState
EN