javascript - 更新状态和后端

Question

我想知道使用我的 React 应用程序执行 HTTP PUT 的最佳方法。我有一个 Post 组件，它从 https://jsonplaceholder.typicode.com/posts/1 获取数据。并显示数据。

我有另一个组件EditPost，当单击“编辑”按钮时，它会显示一个对话框，用户可以在其中编辑帖子。当前数据通过 prop 发送到 EditPost。

问题

• 最好将状态保存在 Post 组件中吗？
• 如果是这样，状态更新和 HTTP PUT 调用是否应该放在 Post 组件中
• 我如何更新例如。 title 而不是 post 的其他属性？

帖子组件

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import Hello from './Hello';
import axios from "axios";

function Post() {
  const [post, setPost] = useState();

  useEffect(() => {
    const fetchData = async () => {
      try {
        const result = await axios(
          "https://jsonplaceholder.typicode.com/posts/1"
        );
        setPost(result.data);
      } catch (error) {console.log(error)}
    };
    fetchData();
  }, []);



  return(
  <div>
    <h1>{post? post.id: ""}</h1> 
    <h1>{post? post.title: ""}</h1> 
    <h1>{post? post.body: ""}</h1> 
          <EditPost value={post}/>
  </div>)
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Post/>, rootElement);

}

编辑帖子组件:

import React from "react";
import Button from "@material-ui/core/Button";
import TextField from "@material-ui/core/TextField";
import Dialog from "@material-ui/core/Dialog";
import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import DialogContentText from "@material-ui/core/DialogContentText";
import DialogTitle from "@material-ui/core/DialogTitle";

export default function EditPost(props) {
  const [open, setOpen] = React.useState(false);

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  function handleSubmit() {
    //Do something
  }

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <Button variant="outlined" color="primary" onClick={handleClickOpen}>
          Update Post
        </Button>
        <Dialog
          open={open}
          onClose={handleClose}
          aria-labelledby="form-dialog-title"
        >
          <DialogTitle id="form-dialog-title">Update Post</DialogTitle>
          <DialogContent>
            <DialogContentText>Update Post</DialogContentText>
            <TextField
              autoFocus
              margin="dense"
              id="title"
              label="title"
              value={props.value.title}
              fullWidth
            />
            <TextField
              autoFocus
              margin="dense"
              id="body"
              label="body"
              value={props.value.body}
              fullWidth
            />
            <TextField
              autoFocus
              margin="dense"
              id="id"
              label="id"
              value={props.value.id}
              fullWidth
            />
          </DialogContent>
          <DialogActions>
            <Button onClick={handleClose} color="primary">
              Cancel
            </Button>
            <Button color="primary" type="submit">
              OK
            </Button>
          </DialogActions>
        </Dialog>
      </div>
    </form>
  );
}

Answer 1

是的，在组件中处理表单的状态是一个很好的做法，因此您需要对代码进行少量修改。

您缺少一个函数来处理要修改的值，因此您可以使用服务更新它，并在后端和用户界面上具有相同的状态。

1. 首先，您需要一个变量来存储您的 title (和其他 props)状态，让我们用 title 来做一个例子。

const [title, setTitle] = useState('');

您还可以将标题设置为父组件请求的数据的属性:

const [title, setTitle] = useState(props.value.title);

然后您必须创建一个处理 title 状态的函数。

const handleTitle = ( e ) => {
  setTitle(e.target.value);
}

您必须将此函数添加到 TextField 组件中。

<TextField
  autoFocus
  margin="dense"
  id="title"
  label="title"
  value={title}
  onChange={handleTitle}
  fullWidth
/>

当您拥有处理对象属性的所有 yoiur 方法时，在本例中是:title、body 和 id，您将需要一种方法将所有这些数据提交到您的服务。

const handleSubmit = () => {
    const newData = {title: title, id: id, body: body };
    //So here you will submit your data , and when the data is successfully submited you will have to update you Parent state to have the same post data in both components, so you will have to pass your 'setPost' method to EditPost Component to be able to do this:
  props.setPost(newData)
  }

因此，要传递更新当前帖子的方法，您必须在 EditPost 声明中执行以下操作:

 <EditPost  setPost={setPost} value={post}/>