reactjs - onClick 循环匹配 API 属性/产品 - ReactJS

Question

需要几个人！:)

我正在尝试使用 ReactJS 为手机构建一个假冒产品页面。

1. 我有一个简单的反应应用程序，我的API 数据存储在 app.js 中的 state 中（不是数据库或 axios 请求）。
2. 我通过了，我将这些数据存储在this.state.phones
3. 并将这些数据传递给一个名为Gold.js的组件
4. 然后我可以遍历我的数据。

然而....

当用户单击电话颜色时，例如金色、深空灰色或银色，我希望页面上的所有状态数据都发生变化。我正在使用handleClick。

例如，我的图片应该改变，价格和产品描述，取决于你点击了哪种颜色。

以下是应用程序当前的工作方式： https ://codesandbox.io/s/kpo51ppxv

但是，当您单击彩色方块（onClick/HandleClick）时，我不确定循环匹配数据并显示正确数据的最佳方法是什么。

到目前为止，我已经对我的数据 .slice(0,1) 进行了切片，只让第一个产品出现在页面上......

Ps - 不知道为什么图像没有出现在链接中，但它们存在于资产中......我还控制台记录了所有内容，因此您可以查看控制台。

谢谢！请帮忙！！

标签： reactjsfunctionapiloopsonclick

Answer 1

您应该color在收听单击颜色框时通过。

你可以在这里看到我的代码：https ://codesandbox.io/s/yq31lp0poj