S
S
sergemin2017-09-27 07:06:52
React
sergemin, 2017-09-27 07:06:52

Why is the state updated normally, but something else is being rendered?

I can't figure out what the problem is. I subscribed to update the state and when sorting / deleting an element in the console, I display the current state with subscribe. State is normally sorted. Just as I wanted, but on the screen everything is not so. Where am I wrong?

sortColumn(e) {
     this.props.onSortColumn(e);
}
render(){
return (
{this.props.studentsStore.studentsList.map((item, index) =>
       <tr className="itemStudent" key={index}>
               <td><input type="text" defaultValue={item.name} /></td>
               <td><input type="text" defaultValue={item.surname} /></td>
               <td>{item.gender}</td>
               <td><input type="text" defaultValue={item.age} /></td>
               <td>{item.isMarried + ''}</td>
               <td><button id="remove" onClick={() => this.removeStudent(index)}>X</button></td>
            </tr>
 )}
)
}
export default connect(
    state => ({
        studentsStore: state
    }),
    dispatch => ({
        onSortColumn: (event) => {
            dispatch({ type: 'SORT_STUDENT', payload: event.target })
        }
        }
    })
)(App);

Here is the reducer
const initialState =  [
    {
        name: 'Bill',
        surname: 'Tomes',
        gender: 'male',
        age: 22,
        isMarried: true,
    },
    {
        name: 'Hanna',
        surname: 'Morton',
        gender: 'female',
        age: 21,
        isMarried: false,
    }
];
export default function studentsList(state = initialState, action) {
    if(action.type === 'ADD_STUDENT') {
        return [
            ...state,
            action.payload
        ]
    }
    if(action.type === 'SORT_STUDENT') {
        function sortArr(a,b) {
            return a.age-b.age;
        }
        let newArr = state.slice();
        if(action.payload.id === 'titleAge') {
            newArr.sort(sortArr);
        }
        return newArr
    }
    return state;
}

Answer the question

In order to leave comments, you need to log in

2 answer(s)
O
Oleg Gamega, 2017-09-27
@sergemin

what is going on anyway? how does it work?
i don't like return newArr
try return [...newArr]

A
Alexander Kramov, 2017-09-27
@nexmean

Why do you have an expression in curly braces in return'e?

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question