Я новичок и только начал учиться реагировать.Я столкнулся с проблемой, что при добавлении элемента я не перегружаю весь список.Хотя обновление и удаление работают нормально, а изменения сразу перезаписываются.Новый элемент появляется в списке после перезагрузки страницы.
получается, я получаю список при монтировании компонента и вытаскиваю его, а когда добавляю новый элемент, состояние неосознает его изменение.Вероятно, вам нужно немедленно перевести в состояние, которое пришло ко мне с fetchNotes ().Как правильно его создать, скажите, пожалуйста, я уже пытался поиграть с willMount () и делать всевозможные манипуляции, но либо мне удается заполнить состояние, но тогда я не работаю this.state.map () или любая другая ерунда ... Мой метод для добавления элемента:
class Note extends Component {
state = {
text: "",
updateNoteId: null,
};
componentDidMount() {
this.props.fetchNotes();
};
resetForm = () => {
this.setState({text: "", updateNoteId: null});
};
selectForEdit = (id) => {
let note = this.props.notes[id];
this.setState({text: note.text, updateNoteId: id});
};
submitNote = (e) => {
e.preventDefault();
if (this.state.updateNoteId === null) {
this.props.addNote(this.state.text).then(this.resetForm);
} else {
this.props.updateNote(this.state.updateNoteId,
this.state.text).then(this.resetForm);
}
this.resetForm();
};
render() {
return (
<div>
<div style={{textAlign: "right"}}>
{this.props.user.username} (<a onClick={this.props.logout}>logout</a>)
</div>
<h3>Add new note</h3>
<form onSubmit={this.submitNote}>
<input
value={this.state.text}
placeholder="Enter note here..."
onChange={(e) => this.setState({text: e.target.value})}
required />
<input type="submit" value="Save Note" />
</form>
<button onClick={this.resetForm}>Reset</button>
<h3>Notes</h3>
<table>
<tbody>
{this.props.notes.map((note, id) => (
<tr key={`note_${id}`}>
<td>{note.text}</td>
<td><button onClick={() => this.selectForEdit(id)}>edit</button></td>
<td><button onClick={() => this.props.deleteNote(id)}>delete</button></td>
</tr>
))}
</tbody>
</table>
</div>
)
}
}
const mapStateToProps = state => {
return {
notes: state.notes,
user: state.auth.user,
}
};
const mapDispatchToProps = dispatch => {
return {
fetchNotes: () => {
dispatch(notes.fetchNotes());
},
addNote: (text) => {
return dispatch(notes.addNote(text));
},
updateNote: (id, text) => {
return dispatch(notes.updateNote(id, text));
},
deleteNote: (id) => {
dispatch(notes.deleteNote(id));
},
logout: () => dispatch(auth.logout()),
}
};
export default connect(mapStateToProps, mapDispatchToProps)(Note);
Редукторы /
const initialState = [];
export default function notes(state=initialState, action) {
let noteList = state.slice();
switch (action.type) {
case 'FETCH_NOTES':
return [...state, ...action.notes];
case 'ADD_NOTE':
return [...state, ...action.note];
case 'UPDATE_NOTE':
let noteToUpdate = noteList[action.index];
noteToUpdate.text = action.note.text;
noteList.splice(action.index, 1, noteToUpdate);
return noteList;
case 'DELETE_NOTE':
noteList.splice(action.index, 1);
return noteList;
default:
return state;
}
}
action
export const fetchNotes = () => {
return (dispatch, getState) => {
let headers = {"Content-Type": "application/json"};
let {token} = getState().auth;
if (token) {
headers["Authorization"] = `Token ${token}`;
}
return fetch("/api/notes/", {headers, })
.then(res => {
if (res.status < 500) {
return res.json().then(data => {
return {status: res.status, data};
})
} else {
console.log("Server Error!");
throw res;
}
})
.then(res => {
if (res.status === 200) {
return dispatch({type: 'FETCH_NOTES', notes: res.data});
} else if (res.status === 401 || res.status === 403) {
dispatch({type: "AUTHENTICATION_ERROR", data: res.data});
throw res.data;
}
})
}
};
export const addNote = text => {
return (dispatch, getState) => {
let headers = {"Content-Type": "application/json"};
let {token} = getState().auth;
if (token) {
headers["Authorization"] = `Token ${token}`;
}
let body = JSON.stringify({text, });
return fetch("/api/notes/", {headers, method: "POST", body})
.then(res => {
if (res.status < 500) {
return res.json().then(data => {
return {status: res.status, data};
})
} else {
console.log("Server Error!");
throw res;
}
})
.then(res => {
if (res.status === 201) {
return dispatch({type: 'ADD_NOTE', note: res.data});
} else if (res.status === 401 || res.status === 403) {
dispatch({type: "AUTHENTICATION_ERROR", data: res.data});
throw res.data;
}
})
}
};
Я думаю, что я должен как-товызовите setState, чтобы явно указать изменения, или, может быть, мне нужно заново создать запрос для бэкэнда, как при инициализации компонента?
Я буду рад любым подсказкам и помощи с вашей стороны.Заранее спасибо!