Reactjs 用户单击下拉菜单项后更新状态

用户界面已经完成，我无法为我的应用程序设置还原程序/操作

我的应用程序需要显示5个项目（图片，名称和下拉名称）由用户从下拉菜单中选择，有100多个项目。这些项目存储在一个文件中，并在我的应用程序中使用

到目前为止，所有东西都在一个容器items_列表中，我有一个单独的items组件

我想在用户单击下拉列表中的项目名称时显示项目信息

这是到目前为止我的代码

现在，代码显示了图片中显示的UI，但下拉列表还不起作用。我应该怎么做才能让这五个项目有自己的状态？这样，我可以从单个下拉列表中选择一个项目，并仅更改该项目的信息。

项目清单

---

你能举一个小例子来说明你的代码接缝是否会被破坏吗。。问题还不清楚。@webdeb我的问题是：如果我想让每个项目组件（在我展示的图片中，一个项目是图片、名称和下拉菜单）都有自己的状态，我该怎么做？例如，如果我单击中间项组件的下拉列表并从下拉列表中选择项99，则图片、名称和下拉列表将显示项99。@webdeb至于代码，只有下拉列表选择不起作用。我从代码中提取了很多信息。这是私人github回购协议。如果你想亲自去看看，我可以邀请你。谢谢你的时间。加上你的逻辑。问题是什么？好的，当然，发送链接。你能给github推一个小例子吗？你的代码接缝无论如何都会被破坏。。问题还不清楚。@webdeb我的问题是：如果我想让每个项目组件（在我展示的图片中，一个项目是图片、名称和下拉菜单）都有自己的状态，我该怎么做？例如，如果我单击中间项组件的下拉列表并从下拉列表中选择项99，则图片、名称和下拉列表将显示项99。@webdeb至于代码，只有下拉列表选择不起作用。我从代码中提取了很多信息。这是私人github回购协议。如果你想亲自去看看，我可以邀请你。谢谢你的时间。加上你的逻辑。有什么问题吗？好的，当然，发送链接

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

import { selectItem } from '../actions/index';
import Item from '../components/item';

class ItemsList extends Component {
  renderItems(item) {
    return (
      <tr key={item.id}>
       <td><Item id={item.id}/></td>
       <td><Item id={item.id}/></td>
       <td><Item id={item.id}/></td>
       <td><Item id={item.id}/></td>
       <td><Item id={item.id}/></td>
      </tr>
    )
  }

  render() {
    return (
      <table className="table table-hover">
        <thead>
          <tr>
            <th>Item 1</th>
            <th>Item 2</th>
            <th>Item 3</th>
            <th>Item 4</th>
            <th>Item 5</th>
          </tr>
        </thead>
        <tbody>
          {this.props.items.map(this.renderItems)}
        </tbody>
      </table>
    )
  }
}

function mapStateToProps({ items }) {
  return { items };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ selectItem }, dispatch);
}

export default connect(mapStateToProps)(ItemsList);

import React from 'react';
import {items} from '../../data/items';

export default (props) => {
  return (
    <div>
      <img src={items[props.id-1].img} />
      <h2>{items[props.id-1].localized_name}</h2>
      <select>
      {items.map((item, id) => 
       <option value="select" key={id}>{item.localized_name}</option>
      )}
      </select>
    </div>
  )
}

import { SELECT_ITEM } from '../actions/index';

export default function(state = [        {
            "name": "default item",
            "id": 1,
            "localized_name": "No item selected",
            "img": "url link",
            ], action) {
  switch (action.type) {
    case SELECT_ITEM:
      return [ action.payload, ...state ];
  }
  return state;
}