Question

我是Reactjs的新手。我正在制作一个表单，表单数据将存储在数组中，并在提交后显示在同一页面上。我正在使用push（）将数据存储在数组中，但是当我按下Submit按钮时遇到错误：

无法读取未定义的属性“ push”

我无法在数组中存储数据。这是我的代码段：

import React from "react";
data = [{ firstName :'', lastName:'', username:'' }];

export default class Form extends React.Component {

  state = {
    firstName: "",
    lastName: "",
    username: ""
  }

  change = e => {
    this.props.onChange({ [e.target.name]: e.target.value });
    this.setState({
      [e.target.name]: e.target.value
    });
  };

  onSubmit = e => {
    e.preventDefault();
    console.log(this.state);

    let firstName = this.state.firstName.value;
    let lastName = this.state.lastName.value;
    let username = this.state.username.value; 


    this.setState({
      data :  this.state.data.push({firstName, lastName, username})
    })


  render() {
    return (
      <form>
        //Form Fields
     )
    }

我需要有关此的帮助。非常感谢！！！

Answer 1

您需要将数据初始化为处于状态的数组。

state = {
  data = []
}

Answer 2

在像这样使用setState时会更好：

import React from "react";
    data = [{ firstName :'', lastName:'', username:'' }];

    export default class Form extends React.Component {

      state = {
        firstName: "",
        lastName: "",
        username: "",
        data
      }

      change = e => {
        this.props.onChange({ [e.target.name]: e.target.value });
        this.setState({
          [e.target.name]: e.target.value
        });
      };

      onSubmit = e => {
        e.preventDefault();
        console.log(this.state);

        let firstName = this.state.firstName.value;
        let lastName = this.state.lastName.value;
        let username = this.state.username.value; 

        /**
         * change here!!
         */
        this.setState(prevState => ({
            ...prevState,
            data: [...prevState.data,{ firstName, lastName, username }]
         }))
       }

      render() {
        return (
          <form>
            //Form Fields
         )
        }

更多信息： https://medium.freecodecamp.org/functional-setstate-is-the-future-of-react-374f30401b6b

Answer 3

只是粗略地看了一下，我认为您应该移动一些代码。您的数据定义应移至该类，您可以安静地使用它来初始化状态。正如其他人所建议的那样，您声明初始化应该在构造函数中。试试这个：

    import React from "react";


    export default class Form extends React.Component {
    constructor() {
      state = {
       data : [{ firstName :'', lastName:'', username:'' }]
      }
    }

      change = e => {
        this.props.onChange({ [e.target.name]: e.target.value });
        this.setState({
          [e.target.name]: e.target.value
        });
      };

      onSubmit = e => {
        e.preventDefault();
        console.log(this.state);

        let firstName = this.state.firstName.value;
        let lastName = this.state.lastName.value;
        let username = this.state.username.value; 


        this.setState({
          data :  this.state.data.push({firstName, lastName, username})
        })


      render() {
        return (
          <form>
            //Form Fields
         )
        }

Answer 4

在setState内，您不能使用push（）方法。因此，而不是推入setState内部只需先向外推，然后将其设置在setState内

data.push（{firstName，lastName，username}）; this.setState（{ 数据：数据， }）

Answer 5

首先-这是非常重要的-切勿直接修改state！查阅文档的this link。

接下来，您得到错误的原因是因为state不了解您的data数组。

如果您想正确执行操作，则应使用an updater function来修改状态。

Answer 6

尝试

this.setState({ data: [...this.state.data, {firstName, lastName, username}] });

Answer 7

在onSubmit（）函数中应用此解决方案后得到答案：

 onSubmit = e => {
    e.preventDefault();
    console.log(this.state);

     data =
     {
        firstName : this.state.firstName,
        lastName : this.state.lastName,
        username : this.state.username, 
        email : this.state.email,
        password : this.state.password,
        birthDay : this.state.birthDay,
        birthMonth : this.state.birthMonth,
        birthYear : this.state.birthYear,
        gender : this.state.gender
    }
     this.state.data.push(data)
     this.setState(this.state);



   };

Push（）在反应中不起作用

7 个答案: