我想在状态数组的末尾添加一个元素,这是正确的方法吗?
this.state.arrayvar.push(newelement);
this.setState({ arrayvar:this.state.arrayvar });
我担心用push修改数组可能会导致麻烦——它安全吗?
另一种方法是复制数组,setstate看起来很浪费。
我想在状态数组的末尾添加一个元素,这是正确的方法吗?
this.state.arrayvar.push(newelement);
this.setState({ arrayvar:this.state.arrayvar });
我担心用push修改数组可能会导致麻烦——它安全吗?
另一种方法是复制数组,setstate看起来很浪费。
当前回答
this.setState((prevState) => {
const newArray = [...prevState.array];
newArray[index] = updatedValue;
return { array: newArray };
});
其他回答
this.setState((prevState) => {
const newArray = [...prevState.array];
newArray[index] = updatedValue;
return { array: newArray };
});
React可以批处理更新,因此正确的方法是为setState提供一个执行更新的函数。
对于React更新插件,以下将可靠地工作:
this.setState( state => update(state, {array: {$push: [4]}}) );
或者对于concat():
this.setState( state => ({
array: state.array.concat([4])
}));
下面以https://jsbin.com/mofekakuqi/7/edit?js,output为例说明如果您弄错了会发生什么。
setTimeout()调用正确地添加了三个项,因为React不会在setTimeout回调中批量更新(参见https://groups.google.com/d/msg/reactjs/G6pljvpTGX0/0ihYw2zK9dEJ)。
错误onClick只会添加“第三”,但固定的一个,将添加F, S和T如预期。
class List extends React.Component {
constructor(props) {
super(props);
this.state = {
array: []
}
setTimeout(this.addSome, 500);
}
addSome = () => {
this.setState(
update(this.state, {array: {$push: ["First"]}}));
this.setState(
update(this.state, {array: {$push: ["Second"]}}));
this.setState(
update(this.state, {array: {$push: ["Third"]}}));
};
addSomeFixed = () => {
this.setState( state =>
update(state, {array: {$push: ["F"]}}));
this.setState( state =>
update(state, {array: {$push: ["S"]}}));
this.setState( state =>
update(state, {array: {$push: ["T"]}}));
};
render() {
const list = this.state.array.map((item, i) => {
return <li key={i}>{item}</li>
});
console.log(this.state);
return (
<div className='list'>
<button onClick={this.addSome}>add three</button>
<button onClick={this.addSomeFixed}>add three (fixed)</button>
<ul>
{list}
</ul>
</div>
);
}
};
ReactDOM.render(<List />, document.getElementById('app'));
//get the value you want to add
const valor1 = event.target.elements.valor1.value;
//add in object
const todo = {
valor1,
}
//now you just push the new value into the state
//prevlista is the value of the old array before updating, it takes the old array value makes a copy and adds a new value
setValor(prevLista =>{
return prevLista.concat(todo) })
这段代码为我工作:
fetch('http://localhost:8080')
.then(response => response.json())
.then(json => {
this.setState({mystate: this.state.mystate.push.apply(this.state.mystate, json)})
})
ES6最简单的方法:
this.setState(prevState => ({
array: [...prevState.array, newElement]
}))