为什么这个 React CRUD 会回到初始状态？答案

【问题标题】：Why this React CRUD goes back to initial state?为什么这个 React CRUD 会回到初始状态？
【发布时间】：2020-05-28 21:12:08
【问题描述】：

我正在练习 react，我正在做一个简单的 crud。我面临的问题是，当我插入一个新元素时，我的应用程序会回到初始状态。我不知道如何解决这个问题。代码如下：

import React, { Component, Fragment } from "react";
import "./App.css";
import Tabela from "./Tabela";

import Form from "./Formulario";

class App extends Component {
  state = {
    autores: [
      {
        nome: "Paulo",
        livro: "React",
        preco: "1000",
      },
      {
        nome: "Daniel",
        livro: "Java",
        preco: "99",
      },
      {
        nome: "Marcos",
        livro: "Design",
        preco: "150",
      },
      {
        nome: "Bruno",
        livro: "DevOps",
        preco: "100",
      },
    ],
  };

  removeAutor = (index) => {
    const { autores } = this.state;

this.setState({
  autores: autores.filter((autor, posAtual) => {
    return posAtual !== index;
  }),
});
  };

  escutadorDeSubmit = autor => {
    this.setState({ autores: [...this.state.autores, autor]})
  }

  render() {
    return (
      <Fragment>
        <Tabela autores={this.state.autores} removeAutor={this.removeAutor} />
        <Form escutadorDeSubmit = {this.escutadorDeSubmit} />
      </Fragment>
    );
  }
}

export default App;

这是另一个类 Formulario.js：

import React, { Component } from 'react';

class Formulario extends Component {

constructor(props) {
    super(props);

    this.stateInicial = {
        nome:'',
        livro:'',
        preco:''
    }

    this.state = this.stateInicial;
}

escutadorDeInput = event => {
    const { name, value } = event.target;

    this.setState({
        [name] : value
    });
}

submitFormulario = () => {
    this.props.escutadorDeSubmit(this.state);
    this.setState(this.stateInicial);
}

render() {

    const { nome, livro, preco } = this.state;

    return (
        <form>

            <label htmlFor="nome">Nome</label>
            <input
                id="nome"
                type="text"
                name="nome"
                value={nome} 
                onChange= {this.escutadorDeInput} />
            <label htmlFor="livro">Livro</label>
            <input
                id="livro"
                type="text"
                name="livro"
                value={livro} 
                onChange= {this.escutadorDeInput} />
            <label htmlFor="preco">Preco</label>
            <input
                id="preco"
                type="text"
                name="preco"
                value={preco} 
                onChange= {this.escutadorDeInput} />
            <button onClick={this.submitFormulario}>Salvar</button>
        </form>
    );
}
}
export default Formulario;

当我插入新作者时，应用会显示新输入一秒钟，然后重新加载到初始状态。我想保留我刚刚插入的记录，不要丢失它。

【问题讨论】：

你好，可以提供 Tabela 组件吗？

标签： javascript reactjs

【解决方案1】：

问题出在表单的提交功能中。由于按钮在表单中，它隐含地获得type="submit" 属性。这意味着，当您单击它时，表单会尝试将其值提交到某个 url，因为它是默认行为。您可以通过在提交函数中使用preventDefault() 来防止这种情况：

submitFormulario = (e) => {
    e.preventDefault()
    this.props.escutadorDeSubmit(this.state);
    this.setState(this.stateInicial);
}

另一种方法是将按钮从表单中取出或显式赋予它type="button" 属性。

【讨论】：