设置新状态可以更改数据的颜色属性,但不能更改图像

6ojccjat  于 2021-09-13  发布在  Java
关注(0)|答案(2)|浏览(381)

我想做一个小应用,用户可以选择他们喜欢的颜色的汽车/摩托车。
我几乎就要实现它了,但不幸的是,当我单击颜色按钮时,它只更改颜色的书面名称,而不更改该汽车/摩托车在特定选定颜色下的预览图像。
我使用相同的逻辑,所以我不知道为什么它在一个部分有效,但在另一个部分无效。
当前行为示例:拾取汽车1的红色->默认颜色名称将被覆盖,但图像将丢失,而不是将其更改为正确的红色汽车图像。
我创建了当前行为的沙箱:
https://codesandbox.io/s/festive-framework-9u75w?file=/src/app.js

dzhpxtsq

dzhpxtsq1#

我把你的沙箱换了一点
我试着在照片里找到图像 colors 对象这意味着 image 不再需要汽车/摩托车的特性。

  1. <CarInfo
  2. key={item.id}
  3. image={
  4. item.car.colors[item.car["selected"].toLowerCase()]
  5. ? item.car.colors[
  6. item.car["selected"].toLowerCase()
  7. ].image
  8. : null
  9. }
  10. name={item.car.name}
  11. color={item.car["selected"]}
  12. />

  1. <MotocycleInfo
  2. key={item.id}
  3. image={
  4. item.motocycle.colors[
  5. item.motocycle["selected"].toLowerCase()
  6. ]
  7. ? item.motocycle.colors[
  8. item.motocycle["selected"].toLowerCase()
  9. ].image
  10. : null
  11. }
  12. name={item.motocycle.name}
  13. color={item.motocycle["selected"]}
  14. />

沙箱
如果您需要在默认情况下显示第一幅图像,则可以缩短代码,以便

  1. image={
  2. item.car.colors[
  3. item.car["selected"]
  4. ? item.car["selected"].toLowerCase()
  5. : 0
  6. ].image
  7. }
展开查看全部
bbmckpt7

bbmckpt72#

只需替换handlecolorcar()方法中单行下面的内容。

  1. // Your code
  2. changedItem.motocycle.image = e.target.value;
  3. // Working code
  4. changedItem.car.image = selectedData.car.colors[e.target.value.toLowerCase()].image;

相关问题