在React js中测试一些东西,并且我的一些逻辑出现问题。我试图从一种形式的输入中获取价值,然后在提交该形式时,我想要该输入值的对象并将其添加到我的ctcList数组中。我正在尝试使用spread的es6功能将我当前的newCtc状态与ctcList状态一起隐藏。当我登录控制台时,我得到了newCtc值,但是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;
答案 0 :(得分:0)
这是有问题的行
// 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 } 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();
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();
this.clearInput();
console.log(this.state.newCtc);
}
// I would also copy this.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() {
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;
答案 1 :(得分:0)
尝试一下,注意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;