Удаление элемента из моего избыточного состояния дает несколько ошибок - PullRequest
Новая
       22

Удаление элемента из моего избыточного состояния дает несколько ошибок

0 голосов
/ 29 марта 2019

У меня 2 проблемы:

  1. Изначально я могу добавить клиентов в пустой массив с помощью создателей действий и моего редуктора.Однако всякий раз, когда я удаляю элементы из списка и пытаюсь добавить в него новых клиентов, возникает ошибка: TypeError: Недопустимая попытка распространения не повторяемого экземпляра.

  2. Когда ясказал, что я удаляю элементы, что на самом деле происходит, я создаю клиентов, а затем, когда я нажимаю кнопку удаления рядом с одним из них, все клиенты удаляют.В консоли нет ошибок, но я просто хочу удалить конкретного клиента с соответствующим идентификатором.

Вот мой код!

Clients.js 

import React, { Component } from 'react'
import AddClient from './AddClient'
import {connect} from 'react-redux'
import {deleteClient} from '../../store/actions/clientActions'

class Clients extends Component {

  handleClick = (id) => {
    console.log(id)
    this.props.deleteClient(id)
  }

  render() {
    const {clientList} = this.props
    return (
      <div className="container mt-5">
        <h2>Here Are Your List of Clients...</h2>
        {clientList && clientList.map(client => {
          return(
            <div key={client.id}>
              <div>
                Client Name: {client.name} | Client Price: {client.price}
                <button onClick={() => {this.handleClick(client.id)}}>Delete</button>
              </div>      
            </div>
          )
        })}
        <AddClient/>
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    clientList : state.clients.clientList,
  }
}

const mapDispatchToProps = (dispatch) => {
  return{
    deleteClient : (id) => dispatch(deleteClient(id)) 
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Clients)

Действия: 

export const addClient = (client) => {
    return(dispatch, getState) => {
        dispatch({type: 'ADD CLIENT', client})
    }
}

export const deleteClient = (id) => {
    return(dispatch, getState) => {
        dispatch({type: 'DELETE CLIENT', id})
    }
}

Редуктор: 

const initState = {
    clientList: []
}

const clientReducer = (state = initState, action) => {
    switch (action.type) {
        case 'ADD CLIENT' : 
            action.client.id = Math.random();
            let clientList =  [...state.clientList, action.client];
            clientList.sort((a, b) => a.name.localeCompare(b.name));
            return {
                clientList
            };

        case 'DELETE CLIENT' :
            const id = action.id;
            clientList = state.clientList.filter(client => 
                {return client.id !== id});
            return clientList;

        default : return state;
    }
}

export default clientReducer

Наконец, это AddClient.js 

import React, { Component } from 'react'
import {connect} from 'react-redux'
import {addClient} from '../../store/actions/clientActions'

class AddClient extends Component {
  state = {
    id: null,
    name: null,
    price: null,
  }

  handleChange = (e) => {
      this.setState({
          [e.target.id] : e.target.value
      })
  } 

  handleSubmit = (e) => {
    e.preventDefault();
    this.props.addClient(this.state);
    e.target.reset();
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit} className="mt-5">
            <h3>Add a new client:</h3>
            <label htmlFor="name">Client Name: </label>
            <input type="text" id="name" onChange={this.handleChange}/><br/>
            <label htmlFor="price">Client Price: </label>
            <input type="text" id="price" onChange={this.handleChange}/> <br/>
            <button className="btn btn-primary">Add Client</button>
        </form>
      </div>
    )
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    addClient: (client) => dispatch(addClient(client))
  }
}

export default connect(null, mapDispatchToProps)(AddClient)

Спасибо за помощь, я новичок в React и Redux.Дайте мне знать, есть ли другой код, который вы хотели бы увидеть.

Ответы [ 3 ]

0 голосов
/ 29 марта 2019

Я понял, проблема в моем clientReducer.js

Это нужно изменить: 

case 'DELETE CLIENT' :
    const id = action.id;
    clientList = state.clientList.filter(client => 
       {return client.id !== id});
    return clientList;

до ... 

case 'DELETE CLIENT' :
    const id = action.id;
    let newClientList = state.clientList.filter(client => {
        return id !== client.id;
    })
    return {clientList : newClientList};
0 голосов
/ 29 марта 2019 
case 'DELETE CLIENT' :
        const id = action.id;
        const clientList = state.clientList.filter(client => 
            {return client.id !== id});
        return {
            ...state,
            clientList
        }

В настоящее время вы возвращаете только массив вместо объекта. Так как это, вероятно, единственное, что у вас есть в вашем хранилище редуксов на данный момент, оно не ломается (в действии ADD), но вы, вероятно, хотите сначала применить предыдущее состояние, а затем добавить свой недавно отфильтрованный список клиентов в возвращаемое состояние.

0 голосов
/ 29 марта 2019

Вот как вы можете выполнить удаление: 

export const deleteClient = (id) => {
    const index = find the index of the client you want to delete from the array
    return(dispatch, getState) => {
        dispatch({type: 'DELETE CLIENT', index})
    }
}



case 'DELETE CLIENT' :
    return {
        ...state,
        clientList: [
              ...state.clientList.slice(0, action.index),
              ...state.clientList.slice(action.index + 1)
        ]
    }
...