如何在提交表单后更新React.js中的DOM

Posted 2021-03-27

我的应用程序应该显示注释并允许用户通过提交表单来添加注释。当我提交表单时，我没有从我的函数获取控制台日志，该日志从服务器获取所有帖子。但是，当我刷新页面或省略event.preventDefault（）时，它会显示最新的帖子。如何在成功发布到服务器后确保getAllNotes（）运行？

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      allNotes: [],
      title: "",
      body: ""
    };
  }

  getAllNotes() {
    axios
      .get("http://localhost:5000/allnotes")
      .then(res => {
        const allNotes = res.data;
        console.log("res.data ", res.data);
        this.setState({ allNotes });
      })
      .catch(err => {
        console.error(err);
      });
  }

  // update state based on name of input
  handleChange = event => {
    this.setState({ [event.target.name]: event.target.value });
  };

  handleSubmit = event => {
    event.preventDefault();
    const { title, body } = this.state;
    const time = moment(Date.now()).format("YYYY-MM-DD HH:mm:ss");

    axios
      .post("http://localhost:5000/addnote", { title, body, time })
      .then(result => {
        this.getAllNotes();
      })
      .catch(err => {
        console.error(err);
      });

    // this.props.history.push("/");
  };

  deleteNote(id) {
    // <-- declare id parameter
    axios
      .delete(`http://localhost:5000/delete/${id}`) // <-- remove ;
      .then(() => {
        // Issue GET request after item deleted to get updated list
        // that excludes note of id
        this.getAllNotes();
      })
      .then(res => {
        const allNotes = res.data;
        this.setState({ allNotes });
      });
  }

  componentDidMount() {
    this.getAllNotes();
  }

  render() {
    const { allNotes, title, body } = this.state;
    return (
      <div className="App">
        <Switch>
          <Route
            exact
            path="/"
            render={() => (
              <Home allNotes={allNotes} deleteNote={this.deleteNote} />
            )}
          />
          <Route
            path="/AddNote"
            render={() => (
              <AddNote
                title={title}
                body={body}
                handleChange={this.handleChange}
                handleSubmit={this.handleSubmit}
              />
            )}
          />
          <Route path="/EditNote" render={() => <EditNote />} />
        </Switch>
      </div>
    );
  }
}

import React from "react";
import Navbar from "react-bootstrap/Navbar";
import { Link } from "react-router-dom";
const AddNote = ({ title, body, handleChange, handleSubmit }) => {
  return (
    <div>
      <Navbar>
        <Navbar.Brand>
          <Link to="/" style={{ textDecoration: "none" }}>
            Notes App
          </Link>
        </Navbar.Brand>
      </Navbar>
      <h1>Add Note</h1>
      <form onSubmit={handleSubmit}>
        <div className="form-group">
          <label>
            Title
            <input
              type="text"
              className="form-control"
              name="title"
              placeholder="Title"
              value={title}
              onChange={handleChange}
            />
          </label>
        </div>
        <div className="form-group">
          <label>
            Note
            <textarea
              className="form-control"
              name="body"
              rows="3"
              value={body}
              onChange={handleChange}
            />
          </label>
        </div>
        <input type="submit" value="Submit" />
      </form>
    </div>
  );
};
export default AddNote;

答案

你能展示Home组件<Home allNotes={allNotes} deleteNote={this.deleteNote} />的代码吗？

Home可能只在初始化时显示它的注释（即它只在Home中将其allNotes道具设置为其状态的Home的构造函数中），这可以解释为什么需要刷新页面才能看到最新的帖子。

BTW：我认为你不小心复制并粘贴了App代码类两次（但对于重复的App代码，你可以编辑它使它成为Home代码:)

另一答案

您无需担心“如何更新DOM”。 React会为你做这件事。每当道具或状态发生变化时，React将使用新值重新渲染组件。唯一的例外是pureComponents，如果新的props和state与之前的props和state完全相同，则不会重新呈现。

在发布到新笔记后，您能确认getAllNotes回调是否正在触发？它仅在刷新后工作的事实意味着componentDidMount正在按预期工作。