Javascript 在reactjs和redux中保存和编辑帖子

我一直在尝试创建一个类似博客的网站，用户可以在其中添加新帖子，保存并在以后进行编辑。我正在用reactjs和redux制作这个网站。对于如何编辑这篇文章，我没有什么困惑，比如我的网站如何知道用户点击了这篇文章进行编辑。为了做到这一点，我使用了react router的链接，其id位于url的末尾，但我不确定这样做是否正确。此外，当我打开现有帖子的编辑器页面时，它应该像上次保存时一样加载，即当用户从主页单击现有帖子时，标题输入和文本区域都应该加载文本

我已经创建了一个网站。我不知道为什么reducer文件中switch语句中的所有行都用红色下划线

这是我的home.js文件，代码片段将在其中加载

import React from "react";
import axios from "axios";
import { Link } from "react-router-dom";
import { onLoad, setEdit } from "./actions/posts";
import { connect } from "react-redux";

class Home extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    //Load all the snippets
    onLoad();
  }

  render() {
    const { snippets } = this.props;

    return (
      <div className="container">
        <div className="row pt-5">
          <div className="col-12 col-lg-6 offset-lg-3">
            <h1 className="text-center">Snippets</h1>
          </div>
        </div>
        <div className="row pt-5">
          <div className="col-12 col-lg-6 offset-lg-3">
            {snippets.map(snippet => {
              return (
                <div className="card my-3" key={snippet.snippetData.snippetId}>
                  <div className="card-header">{snippet.title}</div>
                  <div className="card-body">{snippet.snippetDescription}</div>
                  <div className="card-footer">
                    <div className="row">
                      <button
                        // onClick={() => this.handleEdit(snippet)}
                        className="btn btn-primary mx-3"
                      >
                        <Link to={`/editor/:${snippet.snippetData.snippetId}`}>
                          Edit
                        </Link>
                      </button>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    );
  }
}

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

export default connect(
  mapStateToProps,
  { onLoad, setEdit }
)(Home);

---

首先，我为您解决了一些问题：

我没有修复编辑器页面，因为我放弃了，在没有学习的情况下给你一个工作代码是没有意义的

我建议您现在停止使用react，因为您没有足够的经验来使用复杂的框架

您的代码有什么问题：

错误地导入commonJS模块

误用组合传感器

滥用html表单元素

误用js开关

无法正确理解redux状态

不完全理解减速机

没有基本的调试技能

停止编写您不理解的代码

这个项目对初学者来说太复杂了

我建议你：

用js实现一个计数器

在vanilla js中实现todo列表

使用纯react、无redux、无react路由器重新实现计数器

使用react+redux重新实现计数器

使用react+redux+thunk重新实现计数器

用react+redux+saga重新实现计数器

重复3-6，但要列出待办事项

---

然后试着编写一个博客。

谢谢你的建设性批评，是的，我是一个初学者。我最近刚加入一份工作，他们告诉我将angular代码迁移到reactjs。在迁移过程中，我意识到该网站需要redux来进行全球状态管理，一切对我来说都非常困难。就像他们把我扔到了大海的尽头。我是公司（初创公司）中唯一的前端开发人员，因为这个瘦削的家伙不知什么原因离开了。虽然我很感激你为修改网站所做的努力，但你能不能也帮我实现编辑器页面，因为这是剩下的最后一件事我保留了CombineReducer，因为我从brad traversy的视频中学习了redux的一些部分，只是从他的git页面复制了样板文件，然后就这样离开了。因为我现在主要关心的是如何设置save post并编辑post。我以后可以删除一些不必要的东西

import React, { Component } from "react";
import { connect } from "react-redux";
import { savePost, retrievePost } from "./actions/posts";

class Editor extends Component {
  state = {
    title: "",
    enteredText: ""
  };
  componentDidMount() {
    //Load the snippet
    retrievePost(); // will it load the snippetId too?
  }

  handleChange = event => {
    const { value } = event.target;
    this.setState({
      enteredText: value
    });
  };

  // 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.handlePost({ ...this.state })}
        >
          Save Snippet
          <i className="fas fa-save" />
        </button>

        <div
          contentEditable={true}
          spellCheck="false"
          name="enteredText"
          placeholder="Enter your text here"
          onChange={this.handleChange}
        />
      </>
    );
  }
}

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

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

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

export const savePost = ({
  snippetId,
  snippetDescription,
  snippetTitle
}) => async dispatch => {
  const config = {
    headers: {
      "Content-Type": "application/json"
    }
  };
  let snippetData = { snippetId, snippetDescription, snippetTitle };
  try {
    if (snippetId == null) {
      const res = await axios.post(
        "/api/save",
        JSON.stringify(snippetData),
        config
      );
      snippetData.snippetId = res.data;
      dispatch({
        type: SAVE_POST,
        payload: snippetData
      });
    } else {
      const res = await axios.post(
        "/api/update",
        JSON.stringify(snippetData),
        config
      );
      dispatch({
        type: UPDATE_POST,
        payload: snippetData
      });
    }
  } catch (err) {
    console.log(err);
  }
};

// Retrieve post

export const retrievePost = snippetId => async dispatch => {
  try {
    const res = await axios.post(`/api/snippetdata/${id}`);
    dispatch({
      type: RETRIEVE_POST,
      payload: res.data
    });
  } catch (err) {
    console.error(err);
  }
};

//Retrieve all the post
export const onLoad = () => async dispatch => {
  try {
    const res = await axios.post(`/api/mysnippets/`);
    dispatch({
      type: HOME_LOADED,
      payload: res.data
    });
  } catch (err) {
    console.error(err);
  }
};

// edit a post