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

Question

用户界面已经完成，我在为我的应用设置reducer / actions时遇到问题。

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

截至目前，所有内容都在一个容器 items_list 中，我有一个组件用于单个项目 items 。

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

这是我到目前为止的代码

现在代码显示图片中显示的用户界面，但下拉列表尚未生效。我应该怎么做才能让五个项目拥有自己的状态？这样我就可以从单个下拉列表中选择一个项目，只更改该项目信息。

的MULTILINE_ACL_COMPONENT

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

item_reducer

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