Хотите придать разное состояние каждому элементу с помощью приставки

Question

Я использую реаги и редуксы, и я пытаюсь простой пример. Если я нажму кнопку, то число будет увеличиваться на 1. Но когда я в данный момент нажму кнопку, вы увидите, что все элементы будут + 1, как я могу это исправить? ...

class Menu extends Component {
  componentDidMount() {
    this.props.getItems();
  }
  plus = () =>{
    this.props.getplus();
  }
  render() {
    const {item, count} = this.props.item
    return (
      <div>
        {item.map(items => {
     <div>{items.example}</div> <buttom onClick={this.plus}> + </button>  
 <div>{count} 
 </div>  }               
      </div>
    ) }
 const mapStateToProps = (state) => ({
   item: state.item
 })
export default connect(mapStateToProps , { getItems, getplus }) (Menu);

itemAction. js

export const getItems = () =>{
  return {
    type: GET_ITEMS
  } }
export const getplus = () => {
  return {
    type: PLUS_ITEMS
  }  }

Reducer.js

const initialState = {
  item: [
    {
     example:"example1"
    },
      {
     example:"example2"
    },
  {
     example:"example3"
    },
  ],
count:0
 }
export default function (state = initialState, action) {
  switch(action.type){
    case GET_ITEMS:
      return {
        ...state
      }
   case PLUS_ITEMS:
     return {
         ...state,
       count:state.count + 1
     }
   default:
        return state;
   }
 }

Answer 1

Я вижу две ошибки в вашем коде, замените это:

 const {item, count} = this.props.item

на это:

const {item, count} = this.props

И сопоставьте также count с вашими реквизитами:

 const mapStateToProps = (state) => ({
   item: state.item
   count: state.count
 })