将数据推入到状态数组 state array 的正确方法

将数据推入一个状态数组碰到了问题。 我试图以这种方式实现它:

this.setState({ myArray: this.state.myArray.push('new value') })

但我相信这是不正确的方式,并导致可变性问题?

562642 次浏览

数组push返回长度

this.state.myArray.push('new value')返回扩展数组的长度,而不是数组本身。

我猜您希望返回值是数组。

不变性

这似乎是React的行为:

永远不要改变这个。直接调用setState() 替换您所做的突变。对待这个问题。就像它是那样的状态 immutable.反应。组件 . < / p >

我猜,你会这样做(不熟悉React):

var joined = this.state.myArray.concat('new value');
this.setState({ myArray: joined })

你可以使用.concat方法创建带有新数据的数组副本:

this.setState({ myArray: this.state.myArray.concat('new value') })

但要注意.concat方法在传递数组时的特殊行为——[1, 2].concat(['foo', 3], 'bar')将导致[1, 2, 'foo', 3, 'bar']

你根本不应该管理这个国家。至少,不是直接的。如果你想要更新你的数组,你会想要这样做。

var newStateArray = this.state.myArray.slice();
newStateArray.push('new value');
this.setState(myArray: newStateArray);

直接处理状态对象是不可取的。你也可以看看React的不可变性帮助。

https://facebook.github.io/react/docs/update.html

使用es6可以这样做:

this.setState({ myArray: [...this.state.myArray, 'new value'] }) //simple value
this.setState({ myArray: [...this.state.myArray, ...[1,2,3] ] }) //another array

扩展语法

React-Native

如果你也想要你的UI(即。ur flatList)是最新的,使用PrevState: 在下面的例子中,如果用户点击按钮,它将添加一个新对象到列表(在模型和UI中)

data: ['shopping','reading'] // declared in constructor
onPress={() => {this.setState((prevState, props) => {
return {data: [new obj].concat(prevState.data) };
})}}.

绝不建议直接改变状态。

在以后的React版本中,推荐的方法是在修改状态时使用updater函数来防止竞争条件:

将字符串推到数组的末尾

this.setState(prevState => ({
myArray: [...prevState.myArray, "new value"]
}))

将字符串推到数组的开头

this.setState(prevState => ({
myArray: ["new value", ...prevState.myArray]
}))

将对象推到数组的末尾

this.setState(prevState => ({
myArray: [...prevState.myArray, {"name": "object"}]
}))

将对象推到数组的开头

this.setState(prevState => ({
myArray: [ {"name": "object"}, ...prevState.myArray]
}))

这条准则对我很有用:

fetch('http://localhost:8080')
.then(response => response.json())
.then(json => {
this.setState({mystate: this.state.mystate.push.apply(this.state.mystate, json)})
})

用下面的方法可以检查和更新对象

this.setState(prevState => ({
Chart: this.state.Chart.length !== 0 ? [...prevState.Chart,data[data.length - 1]] : data
}));
这里你不能像这样将对象推到一个状态数组中。你可以用普通数组来推。 这里你需要设置状态,

this.setState({
myArray: [...this.state.myArray, 'new value']
})

功能组件;反应钩子

const [array,setArray] = useState([]);

最后推值:

setArray(oldArray => [...oldArray,newValue] );

在开始时推值:

setArray(oldArray => [newValue,...oldArray] );

你打破了React的原则,你应该克隆旧的状态,然后将其与新数据合并,你不应该直接操纵你的状态, 你的代码应该像这样

fetch('http://localhost:8080').then(response => response.json()).then(json ={this.setState({mystate[...this.state.mystate, json]}) })

使用react钩子,你可以这样做

const [countryList, setCountries] = useState([]);




setCountries((countryList) => [
...countryList,
"India",
]);

我想现在回答这个问题有点晚了,但对于那些新来的人来说

你可以使用这个叫做immer的小包

请看这个例子:https://immerjs.github.io/immer/produce

  setState([...prevState, {
label: newState.name,
value: newState.id
}]);

正在与下拉菜单工作,并希望在那里实现这个场景,我发现了这个简单的解决方案下拉多个值。

如果你使用:

const[myArr, setMyArr] = useState([]);

添加:

setMyArr([...myArr, value]);

至于移除:

let index = myArr.indexOf(value);
if(index !== -1)
setPatch([...myArr.slice(0, index), ...myArr.slice(index, myArr.length-1)]);