Как обновить DOM в React.js после отправки формы

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

Вам не нужно беспокоиться о том, «как обновить DOM».Реакт делает это для вас.Всякий раз, когда реквизит или состояние изменяются, React будет перерисовывать ваш компонент с новыми значениями.Единственным исключением являются pureComponents, которые не будут перерисовываться, если новые реквизиты и состояние точно такие же, как и предыдущие реквизиты и состояние.

Можете ли вы подтвердить, что обратный вызов getAllNotes запускается после публикации в новой заметке?Тот факт, что он работает только после обновления, означает, что componentDidMount работает должным образом.

Answer 2

Можете ли вы показать код для Home компонента <Home allNotes={allNotes} deleteNote={this.deleteNote} />?

Возможно, что Home отображает только свои заметки при инициализации (т. Е. Только в конструкторе Home устанавливает Home *)1006 * означает его состояние), что может объяснить, почему вам нужно обновить страницу, прежде чем вы сможете увидеть последнее сообщение.

Кстати: я думаю, что вы случайно скопировали и вставили класс кода App дважды (но для дублированного кода App, вы можете просто отредактировать его, чтобы сделать его кодом Home :)