开发者问题收集

如何将对象推送到状态对象数组,使用 Typescript 做出反应

2019-04-29
3963

我需要维护存储在状态对象中的对象数组。基本上,每当我单击“添加”按钮时,我都需要将每个对象推送到此数组。这基本上应该将此对象存储在数组中。

此外,当我尝试提交时,我无法获取正确的值? 我哪里做错了?

基本上我想要的结构是:

users= [
        {"name":"xxx","email":"yyy","phone":"656"},
        {"name":"yyy","email":"xxx","phone":"55"}
       ];
import * as React from 'react';
interface IState{
    users : Account[];
}
interface Account{
  name: string;
  email: string;
  phone: string
}

export default class App extends React.Component<{},IState> {

    constructor(props:any){
       super(props);
       this.state= { 
                         users: []
                   }
    }


  handleChange = ( event: React.ChangeEvent<HTMLInputElement>) => {
   this.setState({
    users:{
      ...this.state.users,
      [event.target.name]:event.target.value
    }
    })
  }

  onAdd = () => {
     this.setState((prevState) => ({
     users: [...prevState.users],
    }));
    console.log(this.state.users); // Unable to get the proper info
  }

  render(){
   <React.Fragment>
     <form onSubmit={this.onAdd}>
       <input type="text" onChange={(e:any) => this.handleChange(e)} name={"name"} />
       <input type="text" onChange={(e:any) => this.handleChange(e)} name={"email"} />
       <input type="text" onChange={(e:any) => this.handleChange(e)} name={"phone"} />
       <button type="submit">Add</button>
      </form>
   </React.Fragment>
  }
}
3个回答

按如下方式更新 onAdd ,因为 setState 方法异步更新状态,因此您无法在调用它之后立即获取状态,但您可以使用 setState 方法中的回调作为第二个参数来实现,该方法在方法更新状态后调用

onAdd = () => {
  this.setState((prevState) => {
    const newUser = {}
    return {
      users: [...prevState.users, newUser],
    }
  }, () => {
    console.log(this.state.users)
  });
}
Shridhar Sharma
2019-04-29

需要纠正的事项:-

1)您仅对一个用户以及所有用户使用一个状态变量 users 。因此,创建两个状态变量,一个用于临时存储用户数据,一个 users 变量用于存储所有用户数据。

2) 您尝试在 setState 之后访问 console.log(this.state.users); ,但它不在回调中,setState 是异步的,它应该在 setState 的回调中。

3) 当用户提交表单时,页面会刷新,这是应用程序的默认行为,我们需要 e.preventDefault(); 来覆盖此行为。

4) 对各个输入文本框使用状态,以便您可以对字段应用验证等。

import * as React from "react";
import { render } from "react-dom";

interface IState {
  users : Account[],
  user: Account
}

interface Account{
  name: string;
  email: string;
  phone: string
}

class App extends React.Component<{}, IState> {
  constructor(props: any) {
    super(props);
    this.state = {
      users: [],
      user: {name: '', email:'', phone: ''}
    }
  }

  handleChange = (event: React.FormEvent<HTMLInputElement>) => {
    this.setState({
      user: {
        ...this.state.user,
        [event.currentTarget.name]: event.currentTarget.value
      }
    });
  };

  onAdd = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    this.setState(
      { 
        users: [...this.state.users, this.state.user],
        user: {name:'', email: '', phone: ''}
      },
      () => {
        console.log("updated state", this.state.users);
      }
    );
  };

  public render() {
    const { name, email, phone } = this.state.user;
    return (
      <form onSubmit={this.onAdd}>
        <input type="text" onChange={this.handleChange} value={name} name="name" />
        <input type="text" onChange={this.handleChange} value={email} name="email" />
        <input type="text" onChange={this.handleChange} value={phone} name="phone" />
        <button type="submit">Add</button>
      </form>
    );
  }
}

render(<App />, document.getElementById("root"));

改进领域 - 您可以声明字段数组,如 fields = ['name', 'phone', 'email'] 并在渲染函数中映射,这样您只需编写一次表单,就可以添加任意字段。

希望有帮助!!!

tarzen chugh
2019-04-29

您不需要 handleChange,在 onAdd 中从事件中获取所有输入值,将它们放入对象中(如 {name: event.target.form.elements.name.value ...} 并将其设置在 users 中(这将是一个数组)

 export default class App extends React.Component{

    constructor(props:any){
       super(props);
       this.state = { 
             users: []
       }
    }

onAdd = (event) => {

 const user = {
   name: event.target.form.elements.name.value,
   email: event.target.form.elements.email.value,
   phone: event.target.form.elements.phone.value
  }
     this.setState({
     users: [...this.state.users, user]
    });

  }

  render(){
   <React.Fragment>
     <form onSubmit={this.onAdd}>
       <input type="text"  name="name" />
       <input type="text" name="email" />
       <input type="text" name="phone" />
       <button type="submit">Add</button>
      </form>
   </React.Fragment>
  }
}

然后如果您记录 this.state.users 您将获得所需的结构

users= [
        {"name":"xxx","email":"yyy","phone":"656"},
        {"name":"yyy","email":"xxx","phone":"55"}
       ];
Roy.B
2019-04-29