Я создаю редактор, который может сохранять и обновлять сообщения. Проблема, с которой я сталкиваюсь, заключается в том, что после первого сохранения сообщения я получаю от сервера сниппид, который я хочу немедленно показать в URL-адресе, иначе мой маршрут все еще будет http://localhost:8000/editor, и если я снова нажму кнопку «Сохранить», он сохраняет дубликат с другим идентификатором. Я хочу, чтобы URL редактора после сохранения в первый раз был похож на http://localhost:8000/editor/123, чтобы при повторном нажатии кнопки «Сохранить» он обновлял сообщение, а не сохранял дубликат с другим идентификатором. Мне было интересно, как решить эту проблему? Может кто-нибудь помочь мне найти решение этой проблемы
codesandbox
редактор. js
import React, { Component } from "react";
import { connect } from "react-redux";
import { savePost, retrievePost } from "./actions/posts";
class Editor extends Component {
constructor(props) {
super(props);
this.state = {
title: "",
enteredText: ""
};
this.commonChange = this.commonChange.bind(this);
}
commonChange(event) {
this.setState({
[event.target.name]: event.target.value
});
}
componentDidMount() {
//Load the snippet
retrievePost(this.props.match.params.snippetId);
}
// Save Snippet
performSave = snippets => {
console.log("save function clicked");
const { enteredText, title } = this.state;
this.props.savePost({
snippetId: this.props.match.params.snippetId, //if the url doesn't change then this also doesn't change so I get duplicate copies
snippetDescription: enteredText,
snippetTitle: title
});
};
render() {
return (
<>
<input
type="text"
id="titletext"
placeholder="Enter title here"
limit-to="64"
className="inptxt"
name="title"
onChange={this.commonChange}
/>
<button className="btn savebtn" onClick={this.performSave}>
Save Snippet
<i className="fas fa-save" />
</button>
<textarea name="enteredText" onChange={this.commonChange} />
</>
);
}
}
const mapStateToProps = state => ({
snippets: state.snippets
});
export default connect(
mapStateToProps,
{ savePost, retrievePost }
)(Editor);
action. js
import { SAVE_POST, UPDATE_POST, RETRIEVE_POST, HOME_LOADED } from "./types";
import axios from "axios";
export const savePost = ({
snippetId,
snippetDescription,
snippetTitle
}) => async dispatch => {
const config = {
headers: {
"Content-Type": "application/json"
}
};
let snippetData = {
title: snippetTitle,
snippetDescription: snippetDescription
};
// --------------------------------------
console.log("in savePost action");
try {
if (snippetId == null) {
const res = await axios.post("/api/savesnippets", snippetData, config);
snippetData.snippetId = res.data; //cause I only get snippetId from the server
dispatch({
type: SAVE_POST,
payload: snippetData
});
} else {
//add snippetId here for update use only --------------------------------------
await axios.post(
"/api/update",
JSON.stringify({ ...snippetData, snippetId }),
config
);
// --------------------------------------
dispatch({
type: UPDATE_POST,
payload: snippetData
});
}
} catch (err) {
console.log(err);
}
};