Javascript 如何使用react和redux更新帖子

我想创建一个博客网站，我希望用户可以保存他们的文章，并在以后编辑相同的文章。我不知道如何让网站知道我想使用snippetId编辑这篇特定的文章，还想让网站知道这是一篇新文章还是我打开了一篇现有的文章进行编辑，这样当我打开一篇文章进行编辑时，标题和文本区域就会充满从redux商店收到的值

我为它创建了一个

Editor.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: "", //should I assign them using snippetData.snippetTitle since if it's a new post then it'll be null anyway
      enteredText: ""
    };
  }
  componentDidMount() {
    //Load the snippet
    retrievePost(); // will it load the snippetId too?
  }

  handleChange = event => {
    const { value } = event.target;
  };

  // Save Snippet
  performSave = snippetData => {
    const { enteredText, title } = this.state;
    savePost(snippetData.snippetId, enteredText, title); //is it the right way to send the parameters to save the post??
  };

  render() {
    return (
      <>
        <input
          type="text"
          id="titletext"
          placeholder="Enter title here"
          limit-to="64"
          className="inptxt"
          onChange={title => this.setState({ title })}
        />
        <button
          className="btn savebtn"
          onClick={() => this.performSave({ ...this.state })}
        >
          Save Snippet
          <i className="fas fa-save" />
        </button>

        <textarea
          name="enteredText"
          onChange={enteredText => this.setState({ enteredText })}
        >
          {}
        </textarea>
      </>
    );
  }
}

const mapStateToProps = state => ({
  snippetData: state.snippetData
});

export default connect(
  mapStateToProps,
  { savePost, retrievePost }
)(Editor);

reducer.js

import {
  SAVE_POST,
  UPDATE_POST,
  RETRIEVE_POST,
  HOME_LOADED
} from "../actions/types";

import { initialState } from "../store";

export default function(state = initialState, action) {
  const { type, payload } = action;
  switch (type) {
    case SAVE_POST:
      return {
        ...state,
        snippetData: payload
      };
    case UPDATE_POST:
      return {
        ...state,
        snippetData: payload
      };
    case RETRIEVE_POST:
      return {
        ...state,
        snippetData: payload
      };
    case HOME_LOADED:
      return {
        ...state,
        snippets: payload
      };
    case "SET_EDIT":
      return {
        ...state,
        snippetToEdit: action.snippet
      };
    default:
      return state;
  }
}

---

首先，您不必

this.performSave（{…this.state}）}

。您已经在班上，因此您可以简单地：

 performSave = () => {
    const { enteredText, title } = this.state;
    savePost(snippetData.snippetId, enteredText, title);}

//发送参数以保存帖子是否正确？？ };

您将获得“无法读取未定义的属性'snippetId'，因为您从未正确定义snippetData”

您可以通过

this.props.match.params.snippetId

访问参数。看

因此，最终保存方法应为：

  performSave = () => {
    const { enteredText, title } = this.state;
    savePost(this.props.match.params.snippetId, enteredText, title);}

---

如果一篇文章已经存在，我如何用服务器上的数据加载输入和文本区域字段，也就是说，如果我打开一篇文章进行编辑，那么我希望这些字段中已经填充了数据。另外，假设如果我保存了文章，那么我将立即在url中没有id，因此，我认为从存储中获取id比在不离开编辑器的情况下再次保存match.params.url更好，否则我认为同一篇文章会有不同id的重复副本，而看不到任何代码，如果我需要以这种方式在接收id的编辑组件上加载某些内容，我将执行获取（或操作，无论什么）在useEffect或ComponentWillMount上，取决于您使用的是类还是挂钩。您可以为异步获取添加加载操作。如果您正在保存并且需要该id，您可以修改后端API以在成功保存时返回该id。这是代码沙盒。您可以查看并帮助我在何处调用匹配的id吗？是否需要编辑特定的id，并使用其现有值加载输入和文本区域？与wordpress一样，您可以查看所有文章，然后单击其中任何一篇进行编辑，texteditor将加载保存的文本api从后端返回id、snippetTitle和snippetDescription。。类似于

{“snippetDescription”：“老实说，有些可能是动态困难”，“snippetTitle”：“demo”，“snippetid”：“caf3358d-050f-4507-b2ef-54060967cda0”}

这样它也从api发送id，可以使用MapStateStorops使用。我将使用redux thunk执行抓取部分。但我不确定如何用现有数据加载编辑器。你能帮帮我吗？

  performSave = () => {
    const { enteredText, title } = this.state;
    savePost(this.props.match.params.snippetId, enteredText, title);}