Question

我的应用程序应该显示注释，并允许用户通过提交表单来添加注释。当我提交表单时，没有从我的函数中获取控制台日志，该日志从服务器获取所有帖子。但是，当我刷新页面或忽略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;

Answer 1

您可以显示Home组件<Home allNotes={allNotes} deleteNote={this.deleteNote} />的代码吗？

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

顺便说一句：我认为您不小心将App代码类复制并粘贴了两次（但是对于重复的App代码，您可以对其进行编辑以使其成为Home代码：）

Answer 2

您无需担心“如何更新DOM”。 React为您做到了。每当道具或状态改变时，React都会使用新值重新渲染您的组件。唯一的例外是pureComponents，如果新的道具和状态与先前的道具和状态完全相同，则不会重新渲染。

您可以确认在发布到新笔记后getAllNotes回调正在触发吗？它仅在刷新后起作用的事实意味着componentDidMount可以按预期工作。

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

2 个答案: