@Komi7ar

Не могу понять почему получают ошибку во время попытки изменить объект?

Требуется динамически обновлять данные внутри таблицы при введении данных в инпуты

обработчик
import { bool } from 'prop-types';
import React from 'react'
import {connect} from "react-redux"
import {createNewUser, deleteUser, changeInfo} from "../components/redux/action"


class SecondWindow extends React.Component{
    constructor(props){
        super(props);
        
         
    }
    
    
    handleOptionChange = e => {
        this.setState(
            {
                selectedOption:e.target.value
            }
        )
    }

    submitHandler = e => {
        e.preventDefault();        

        const newUser = {
            id: Date.now().toString(),
            FIO: "Имя",
            position:"Должность",
            birthDay: "год/месяц/день",
            sex: true ,
            fired: false
        };
        console.log(this.props);
        this.props.createNewUser(newUser);
    }

    // changeInputHandler = e => {
    //     e.persist();
    //     this.setState(prev=>({...prev, ...{
    //         [e.target.name]: e.target.value
    //     }}))
    // }
    changeInputHandler = ({ target: t }) => {
        this.setState(state => ({
          ...state,
          [t.name]: t.type === 'checkbox' ? t.checked : t.value,
        }));
        

        const valueForUpdate = {
            id: this.props.items.activeUser.id,
            box: t.name,
            newValue: t.type === 'checkbox' ? t.checked : t.value
        };
        
        this.props.changeInfo(valueForUpdate);
      }

    isFormValid = () => {
        const {FIO, position, birthDay, sex, fired} = this.state;
        console.log(FIO && position && birthDay && sex && fired);
        return FIO && position && birthDay && sex && fired 
    }

    deleteUser = () => {
        this.props.deleteUser(this.props.items.activeUser);
        
    }
    

    render() {
        return (
            <form onSubmit={this.submitHandler}>
                <div className="input-group mb-3">                    
                    <input type="text" className="form-control" placeholder="ФИО"
                    name="FIO" 
                    onChange={this.changeInputHandler}
                    value={this.props.items.activeUser.FIO}
                    ></input>
                </div>
                <select className="form-select" aria-label="Default select example"
                name ="position"
                onChange={this.changeInputHandler}
                value={this.props.items.activeUser.position}> 
                    <option defaultValue = "Выбирите должность">Выбирите должность</option>       
                    <option value="Старший разработчик">Старший разработчик</option>
                    <option value="Младший разработчик">Младший разработчик</option>
                    <option value="Эйчар">Эйчар</option>
                    <option value="Уборщик">Уборщик</option>
                </select>

                <div className="form-group ">                
                    <div className="mb-3"></div>
                        <input className="form-control" type="date"  id="example-date-input"
                        name ="birthDay"
                        onChange={this.changeInputHandler}
                        value={this.props.items.activeUser.birthDay}></input>  
                </div>
              


               
                <div className="form-check">
                    <input className="form-check-input" type="radio" name="flexRadioDefault"
                     id="flexRadioDefault1"
                     value ="М"
                     name ="sex"
                     onChange={this.changeInputHandler}
                     checked={this.props.items.activeUser.sex}
                    ></input>
                    <label className="form-check-label" htmlFor="flexRadioDefault1">
                    М
                    </label>
                </div>
                <div className="form-check">
                    <input className="form-check-input" type="radio" name="flexRadioDefault"
                    id="flexRadioDefault1"
                    value ="Ж"
                    name ="sex"
                    onChange={this.changeInputHandler}
                    checked={!this.props.items.activeUser.sex}
                    ></input>
                    <label className="form-check-label" htmlFor="flexRadioDefault1">
                    Ж
                    </label>
                
                </div>

                
                
                <div className="form-check">
                    <input className="form-check-input" type="checkbox"  id="flexCheckDefault"
                    name ="fired"
                    onChange={this.changeInputHandler}
                    checked={this.props.items.activeUser.fired}
                    ></input>
                    <label className="form-check-label" htmlFor="flexCheckDefault">
                    Уволен
                    </label>
                </div>
                <button type="button" className="btn btn-success" onClick = {this.submitHandler}
                 disabled = {!this.isFormValid}
                 >Добавить нового сотрудника</button>
                <button type="button" className="btn btn-danger"
                 onClick = {this.deleteUser}>Удалить выбранного сотрудника</button>  
            </form>
        );
    }
}

const mapStateToProps = state => {
    console.log(state.items.items);
    return {
        items: state.items,

    }
}

const mapDispatchToProps = {
    createNewUser: createNewUser,
    deleteUser:deleteUser,
    changeInfo:changeInfo
}

export default connect(mapStateToProps, mapDispatchToProps)(SecondWindow);


код редакс.
const reducer = (state = initialState, action) => {
    switch (action.type) {
        case CREATE_NEW_USER:            
            return {...state, items: state.items.concat([action.payload])}
        
        case DELETE_USER:
            return {...state, items: state.items.filter((item)=>{
                return item.id !== action.payload.id;
            })
        }
        case USER_INFO:
            return {...state, activeUser: action.payload}

        case CHANGE_INFO:
            return {...state, items: state.items.forEach((item)=>{ // если использовать forEach получаю ошибку 1, если map то 2
                if(item.id === action.payload.id){  
                    console.log(item) 
                    console.log(action.payload.id, item[action.payload.box], action.payload.newValue);                 
                    item[action.payload.box] = action.payload.newValue
                }
            })
        }
       

        default:
            return state;
    }
    
}


Экшен
export function changeInfo(item) {
    return {
        type: CHANGE_INFO,
        payload: item
    }
}


Ошибка 1
×
TypeError: Cannot read property 'map' of undefined
FirstWindow
E:/Важно/web/dev/greenData/green-data/src/components/FirstWindow.js:18
  15 | 
  16 | const [active, setActive] = React.useState(null);
  17 | return(
> 18 |     <div className = "container">
     | ^  19 |         {
  20 |             items.items.map((item,i) =>{
  21 |                 return <FirstWindowItems
View compiled
▶ 28 stack frames were collapsed.


Ошибка 2
×
TypeError: Cannot read property 'id' of undefined
(anonymous function)
E:/Важно/web/dev/greenData/green-data/src/components/FirstWindow.js:21
  18 | <div className = "container">
  19 |     {
  20 |         items.items.map((item,i) =>{
> 21 |             return <FirstWindowItems
     | ^  22 |              item = {item}
  23 |              isActive={active===i}
  24 |              onClick={()=>getElem(i,item)}
View compiled
  • Вопрос задан
  • 34 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы