如何在 Reactjs 中创建审批帖子？

Question

我需要在上线前批准“帖子”，

第一个问题是我需要在后端编码，还是只能在前端按顺序编码添加功能？

所以我有一些创建帖子的代码，我需要在转到主页之前将数据发送到确认页面。

这是创建帖子的代码：

      const onSubmit = (data) => {
    if (data.postText) {
      const formData = postToFormData(data, file, createTags);
      axios
        .post(`/posts`, formData, {
          headers: {
            "Content-Type": "multipart/form-data",
            accessToken: localStorage.getItem("accessToken"),
          },
        })
        .then((res) => {
          setTimeout(() => {
            history.push("/approving");
          }, 2000);
        });
      setMessage("posct created successfully!");
    }
  };

如您在上面的代码中看到的，我们有一个 post 方法来发布数据，我需要将数据发送到审批页面，在该页面我需要查看所有数据并按“批准”或“拒绝”

我在主页中有 3 个状态来显示数据：

 @{value.fullName}
  {value.postTitle}
  {value.postText}

感谢您的帮助。

Answer 1

我认为您不需要修改后端。仅发送 PUT 请求以更新帖子（如果后端接受）。

关于另一个问题，您无需重定向到另一个 url 即可在 react 中显示新内容。您可以根据状态显示不同的内容。

const Form = ({submitting, handleSubmit, formData, setFormData}) => {
  return <form onSubmit={handleSubmit}>
    <input 
      type="text" 
      required
      value={formData.text} 
      onChange={(e) => setFormData({text: e.target.value})}
    />
    <br />
    <button type="submit">{submitting ? 'Sending...' : 'Save'}</button>
  </form>
}

const Revision = ({formData}) => {
  return <div>
    <p>Your sucess message...</p>
    <p>{formData.text }</p>
    <button>Approve</button>
    <button>Reject</button>
  </div>
}

const App = () => {
  const [submitting, setSubmitting] = React.useState(false)
  const [submitted, setSubmitted] = React.useState(false)
  const [formData, setFormData] = React.useState({text: ''})
  
  const handleSubmit = (e) => {
    e.preventDefault()
    setSubmitting(true)
    // Fake send post data
    setTimeout(() => {
      setSubmitted(true)
    }, 1000)
  }
  
  const handleApprove = () => {
    // Send PUT request to update your post.
  }
  
  const handleReject = () => {
    // Send PUT request to update your post.
  }
  
  if (submitted) {
    return <Revision
      formData={formData}
      handleApprove={handleApprove}
      handleReject={handleReject}
    />
  } else {
    return <Form 
      submitting={submitting}
      handleSubmit={handleSubmit} 
      formData={formData}
      setFormData={setFormData}
    />
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('container')
);

<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>


<div id="container"></div>

Answer 2

我不太明白您所说的“在上线前批准帖子”是什么意思。但这里是我认为我理解的场景：-

a) CONFIRMATION FEATURE 在向后端提交新帖子之前（基本上是在数据库中创建一组新数据）javascript

b) 在新帖子成功提交并在数据库中创建后批准或拒绝功能

对于场景A：-

• 您可以创建一个组件（如弹出窗口或其他内容），让用户选择是否要确认或取消创建新的帖子数据。
• 确认 - 将触发onSubmit 函数并将数据发送到后端以创建新帖子
• 取消 - 将每个状态重置为其默认值/状态（基本上清空每个输入占位符）

对于场景 B：-

• 您必须在数据库中有某种变量来区分哪些帖子被批准，哪些不是。 （如 status 或 publish_status - 可以设置为 Yes 或 No 或 1 或 0）
• 创建一个新的function 来处理所述/选定帖子的数据库中status/publish_status var/value 的更改/更新。这可以在创建新帖子后立即完成（如您想要的）或在您想要的任何时间完成（基本上您有一个工作 UI 可以处理仅包含 id、title、status/publish_status 和action buttons 像 edit、delete 和/或 publish，通常我们会在表格中显示它 - 所以如果你点击 action button publish，那么它将触发 update/put 请求更改/更新数据库中的status/publish_status。如果put 请求成功，请确保将您的publish action button text 更改为unpublish）