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

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

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

dzhpxtsq

dzhpxtsq1#

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

<CarInfo
                    key={item.id}
                    image={
                      item.car.colors[item.car["selected"].toLowerCase()]
                        ? item.car.colors[
                            item.car["selected"].toLowerCase()
                          ].image
                        : null
                    }
                    name={item.car.name}
                    color={item.car["selected"]}
                  />

<MotocycleInfo
                    key={item.id}
                    image={
                      item.motocycle.colors[
                        item.motocycle["selected"].toLowerCase()
                      ]
                        ? item.motocycle.colors[
                            item.motocycle["selected"].toLowerCase()
                          ].image
                        : null
                    }
                    name={item.motocycle.name}
                    color={item.motocycle["selected"]}
                  />

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

image={
              item.car.colors[
                item.car["selected"]
                  ? item.car["selected"].toLowerCase()
                  : 0
              ].image
            }
bbmckpt7

bbmckpt72#

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

// Your code   
 changedItem.motocycle.image = e.target.value;

 // Working code
 changedItem.car.image = selectedData.car.colors[e.target.value.toLowerCase()].image;

相关问题