Javascript react js向状态数组添加对象_Javascript_Reactjs_Ecmascript 6

Javascript react js向状态数组添加对象

javascript reactjs ecmascript-6

Javascript react js向状态数组添加对象,javascript,reactjs,ecmascript-6,Javascript,Reactjs,Ecmascript 6,在React js中测试一些东西，我的一些逻辑出现了一些问题。我试图从表单中的输入中获取值，然后在提交表单时，我希望获取输入值的对象，并将它们添加到我的ctcList数组中。我正试图使用spread的es6特性将我当前的新CTC状态与我的ctcList状态结合起来。当我记录控制台日志时，我得到了新的CTC值，但是ctcList数组是空的。感谢您的帮助谢谢大家! import React, { Component } from 'react'; import Contact from './Co

在React js中测试一些东西，我的一些逻辑出现了一些问题。我试图从表单中的输入中获取值，然后在提交表单时，我希望获取输入值的对象，并将它们添加到我的ctcList数组中。我正试图使用spread的es6特性将我当前的新CTC状态与我的ctcList状态结合起来。当我记录控制台日志时，我得到了新的CTC值，但是ctcList数组是空的。感谢您的帮助

谢谢大家!

import React, { Component } from 'react';
import Contact from './Contact';
import TestData from './TestData';


class ContactList extends Component {
  constructor(props){
    super(props);
    this.state = {
      name: '',
      test1:'',
      test2:'',
      newCtc:{},
      ctcList:[],
      arr: []
    }
  }

  async componentDidMount() {
    try{
      const result = await fetch('https://jsonplaceholder.typicode.com/users')
      const data = await result.json()
      this.setState({arr:data})

    }catch(err){
      console.log(err)
    }
  }


  onChangeInput = (e)=>{
    const target = e.target;
    const name = target.name;
    const value = target.value;
    console.log(value)
    this.setState({
      [name]: value
    });
  }

  newSubmit = (e) =>{
    e.preventDefault();



    this.setState(Object.assign(this.state.newCtc,{test1:this.state.test1, test2:this.state.test2}));


    console.log(this.state.newCtc)

    this.addContact();



    this.clearInput();
    console.log(this.state.newCtc);

    }



    addContact = ()=>{
      this.setState({ ctcList:[ ...this.state.ctcList, this.state.newCtc] });
      console.log(this.state.ctcList);
    };




    clearInput = ()=>{
      this.setState({test1:'',test2:''});
      this.setState(Object.assign(this.state.newCtc,{test1:'', test2:''}));
    };

  render() {


    return (
      <div>
      <Contact firstName = {this.state.name} lastName='mcdaniel' phoneNumber = '585-721-3824' />
      <input type = 'text' name = 'name' onChange = {this.onChangeInput}></input>

      <TestData data={this.state.arr} />  


      <form onSubmit = {this.newSubmit}>

      <input type='text' name={'test1'} value={this.state.test1} onChange = {this.onChangeInput}

        />
      <input type='text' name={'test2'} value={this.state.test2}  onChange = {this.onChangeInput}

        />
      <button type='submit'> submit </button>
      </form>

    </div> 
    )
  }
}
export default ContactList;

import React，{Component}来自'React'；
从“./Contact”导入联系人；
从“/TestData”导入TestData；
类ContactList扩展组件{
建造师（道具）{
超级（道具）；
此.state={
名称：“”，
测试1:“”，
测试2:“”，
newCtc:{}，
ctcList:[]，
arr:[]
}
}
异步组件didmount（）{
试一试{
const result=等待取数（'https://jsonplaceholder.typicode.com/users')
const data=await result.json（）
this.setState（{arr:data}）
}捕捉（错误）{
console.log（错误）
}
}
onChangeInput=（e）=>{
const target=e.target；
const name=target.name；
常量值=target.value；
console.log（值）
这是我的国家({
[名称]：值
});
}
newSubmit=（e）=>{
e、 预防默认值（）；
this.setState（Object.assign（this.state.newCtc，{test1:this.state.test1，test2:this.state.test2}））；
console.log（this.state.newCtc）
this.addContact（）；
这个.clearInput（）；
console.log（this.state.newCtc）；
}
addContact=（）=>{
this.setState（{ctcList:[…this.state.ctcList，this.state.newCtc]}）；
console.log（this.state.ctcList）；
};
clearInput=（）=>{
this.setState（{test1:''，test2:''}）；
this.setState（Object.assign（this.state.newCtc，{test1:''，test2:''}））；
};
render（）{
返回(
提交
)
}
}
导出默认联系人列表；

这里有一行有问题的行

// newCtc is empty => so Object.assign, simply returns {test1: 'some value', test2: //  somevalue }
// this.setState then merges this into the array, so newCtc is not actually updated
// but the properties test1 and test2
this.setState(Object.assign(this.state.newCtc,{test1:this.state.test1, test2:this.state.test2}));

import React，{Component}来自'React'；
从“./Contact”导入联系人；
从“/TestData”导入TestData；
类ContactList扩展组件{
建造师（道具）{
超级（道具）；
此.state={
名称：“”，
测试1:“”，
测试2:“”，
newCtc:{}，
ctcList:[]，
arr:[]
}
}
异步组件didmount（）{
试一试{
const result=等待取数（'https://jsonplaceholder.typicode.com/users')
const data=await result.json（）
this.setState（{arr:data}）
}捕捉（错误）{
console.log（错误）
}
}
onChangeInput=（e）=>{
const target=e.target；
const name=target.name；
常量值=target.value；
console.log（值）
这是我的国家({
[名称]：值
});
}
newSubmit=（e）=>{
e、 预防默认值（）；
const ctcCopy=Object.assign（{}，this.state.newCtc）；
this.setState（{newCtc:Object.assign（ctcCopy{
test1:this.state.test1，
test2:this.state.test2，
})})
console.log（this.state.newCtc）
this.addContact（）；
这个.clearInput（）；
console.log（this.state.newCtc）；
}
//我还要复制这个.state.newCtc
addContact=（）=>{
this.setState（{ctcList:[…this.state.ctcList，…this.state.newCtc]}）；
console.log（this.state.ctcList）；
};
clearInput=（）=>{
this.setState（{test1:''，test2:''}）；
const ctcCopy=Object.assign（{}，this.state.newCtc）；
this.setState（{newCtc:Object.assign（ctcCopy{
test1:this.state.test1，
test2:this.state.test2，
})})
};
render（）{
返回(
提交
)
}
}
导出默认联系人列表；

试试这个，注意setState的回调函数

import React, { Component } from 'react';



class ContactList extends Component {
  constructor(props){
    super(props);
    this.state = {
      name: '',
      test1:'',
      test2:'',
      newCtc:{},
      ctcList:[],
      arr: []
    }
  }

  async componentDidMount() {
    try{
      const result = await fetch('https://jsonplaceholder.typicode.com/users')
      const data = await result.json()
      this.setState({arr:data})

    }catch(err){
      console.log(err)
    }
  }


  onChangeInput = (e)=>{
    const target = e.target;
    const name = target.name;
    const value = target.value;

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

  newSubmit = (e) =>{
    e.preventDefault();

    this.setState(Object.assign(this.state.newCtc,{test1:this.state.test1, test2:this.state.test2}), ()=>{
        console.log('newctc', this.state.newCtc)
        this.addContact();            
    });

    }



    addContact = ()=>{
        let newCtcList = [...this.state.ctcList];
        newCtcList.push({...this.state.newCtc});
        console.log('newctc addcontact', this.state.newCtc);
        console.log('newctclist',newCtcList);

      this.setState({ ctcList: newCtcList }, ()=>{
        console.log(this.state.ctcList);
        this.clearInput();
      });

    };




    clearInput = ()=>{
      this.setState({test1:'',test2:''});
      this.setState(Object.assign(this.state.newCtc,{test1:'', test2:''}));
    };

  render() {


    return (
      <div>

      <input type = 'text' name = 'name' onChange = {this.onChangeInput}></input>



      <form onSubmit = {this.newSubmit}>

      <input type='text' name={'test1'} value={this.state.test1} onChange = {this.onChangeInput}

        />
      <input type='text' name={'test2'} value={this.state.test2}  onChange = {this.onChangeInput}

        />
      <button type='submit'> submit </button>
      </form>

    </div> 
    )
  }
}
export default ContactList;

import React，{Component}来自'React'；
类ContactList扩展组件{
建造师（道具）{
超级（道具）；
此.state={
名称：“”，
测试1:“”，
测试2:“”，
newCtc:{}，
ctcList:[]，
arr:[]
}
}
异步组件didmount（）{
试一试{
const result=等待取数（'https://jsonplaceholder.typicode.com/users')
const data=await result.json（）
this.setState（{arr:data}）
}捕捉（错误）{
console.log（错误）
}
}
onChangeInput=（e）=>{
const target=e.target；
const name=target.name；
常量值=target.value；
这是我的国家({
[名称]：值
});
}
newSubmit=（e）=>{
e、 预防默认值（）；
this.setState（Object.assign（this.state.newCtc，{test1:this.state.test1，test2:this.state.test2}），（）=>{
console.log（'newctc'，this.state.newctc）
this.addContact（）；
});
}
addContact=（）=>{
让newCtcList=[…this.state.ctcList]；
newCtcList.push（{…this.state.newCtc}）；
log（'newctc addcontact'，this.state.newctc）；
console.log（'newctclist'，newctclist）；
this.setState（{ctcList:newCtcList}，（）=>{
console.log（this.state.ctcList）；
这个.clearInput（）；
});
};
clearInput=（）=>{
this.setState（{test1:''，test2:''}）；
this.setState（Object.assign（this.state.newCtc，{test1:''，test2:''}））；
};
render（）{
返回(
提交
)
}
}
导出默认联系人列表；

我发现有一件事可能与之重复，那就是向setstate添加一个回调，但出于某种原因，这对我也不起作用。

import React, { Component } from 'react';



class ContactList extends Component {
  constructor(props){
    super(props);
    this.state = {
      name: '',
      test1:'',
      test2:'',
      newCtc:{},
      ctcList:[],
      arr: []
    }
  }

  async componentDidMount() {
    try{
      const result = await fetch('https://jsonplaceholder.typicode.com/users')
      const data = await result.json()
      this.setState({arr:data})

    }catch(err){
      console.log(err)
    }
  }


  onChangeInput = (e)=>{
    const target = e.target;
    const name = target.name;
    const value = target.value;

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

  newSubmit = (e) =>{
    e.preventDefault();

    this.setState(Object.assign(this.state.newCtc,{test1:this.state.test1, test2:this.state.test2}), ()=>{
        console.log('newctc', this.state.newCtc)
        this.addContact();            
    });

    }



    addContact = ()=>{
        let newCtcList = [...this.state.ctcList];
        newCtcList.push({...this.state.newCtc});
        console.log('newctc addcontact', this.state.newCtc);
        console.log('newctclist',newCtcList);

      this.setState({ ctcList: newCtcList }, ()=>{
        console.log(this.state.ctcList);
        this.clearInput();
      });

    };




    clearInput = ()=>{
      this.setState({test1:'',test2:''});
      this.setState(Object.assign(this.state.newCtc,{test1:'', test2:''}));
    };

  render() {


    return (
      <div>

      <input type = 'text' name = 'name' onChange = {this.onChangeInput}></input>



      <form onSubmit = {this.newSubmit}>

      <input type='text' name={'test1'} value={this.state.test1} onChange = {this.onChangeInput}

        />
      <input type='text' name={'test2'} value={this.state.test2}  onChange = {this.onChangeInput}

        />
      <button type='submit'> submit </button>
      </form>

    </div> 
    )
  }
}
export default ContactList;