将数据添加到状态对象中的数组中
介绍
状态管理是开发动态 UI 组件时需要理解的重要概念。React 组件可分为有状态组件和无状态组件。类组件使用状态对象更新 UI，方法是使用可以获取更新值的setstate函数或使用更新数据触发渲染周期的函数。另一方面，功能组件使用 React 钩子来跟踪 UI 更新的数据变化。
数组通常用作数据源来创建复杂的 UI 元素，例如表格、列表或网格。状态对象可以存储数组，这些数组可以通过 API 或用户的响应进行更新。React 使用浅层比较来跟踪状态对象的变化，这种比较在比较对象时不会比较对象的属性。
本指南解释了使用数组修改组件状态的步骤。
在组件中显示数组数据
可以使用传统的for循环或map函数来遍历数组。可以使用map函数遍历数组的内容并将其转换为 UI 元素，该函数会将传递的转换器函数应用于每个数组元素并返回元素列表。这也可以直接在 JSX 范围（“{}”）中完成，以直接在组件上呈现元素。按照以下示例实现一个用户列表，并使用添加按钮在列表中显示输入值：
import React, { Component } from "react";
import "./style.css";
export default class App extends Component {
state = {
cart: ["Corn", "Potato"],
};
saveInput = (e) => {
this.setState({ input: e.target.value });
};
addNewItem = () => {
let { cart, input } = this.state;
cart.push(input);
// this.state.cart.push(this.state.input); // same as above, though bad practice
};
render() {
return (
<div>
<input
type="text"
onChange={this.saveInput}
/>
<button onClick={this.addNewItem}> Add Item </button>
<ol>
{this.state.cart.map((subItems, sIndex) => {
return <li key={sIndex}> {subItems}</li>
})}
</ol>
</div>
);
}
}
状态对象包含一个具有两个值的购物车数组。 saveInput方法使用输入键标签将用户的输入保存在状态对象中。 在按钮单击事件中，使用解构语法检索购物车和输入值，并将输入值添加到购物车数组中。 这是一种糟糕的方法，因为除非使用setState方法，否则 React 永远不会知道状态的变化。
注意：在上面的例子中，当你开始输入时列表就会更新，因为onChange会更新重新渲染App组件的状态。
显示更新的数组数据
为了更新状态对象中的数组，必须使用setState方法向输入键提供一个新的数组对象：
addNewItem = () => {
let { cart, input } = this.state;
cart.push(input);
this.setState({cart: cart});
};
setState方法将用更新后的数组替换现有数组，但这也可以通过使用扩展（...）运算符的更短语法来实现：
addNewItem = () => {
this.setState({cart: [...this.state.cart, this.state.input]});
};
或者也可以使用concat方法：
addNewItem = () => {
this.setState({cart: this.state.cart.concat(this.state.input)});
};
concat方法通过组合cart数组和输入值来创建并返回一个新数组。
处理状态的异步变化
在处理庞大或复杂的对象时，确保状态的完整性至关重要。setState方法是异步的，这意味着状态对象中的数据不会立即更新，并且 React 可以组合多个状态更改调用以提高性能。数据也可以随时更新，因此为了避免异步行为可能产生的副作用，建议使用先前状态的快照来创建新状态：
addNewItem = () => {
this.setState((prevState, props) => ({
cart: [...prevState.cart, prevState.input],
}));
};
并且可以跳过props而仅使用prevState：
addNewItem = () => {
this.setState(prevState => ({
cart: [...prevState.cart, prevState.input],
}));
};
尖端
• React 使用键来跟踪动态元素 ( li ) 中的变化，因此索引和元素数据可用于创建唯一键：
{
this.state.cart.map((subItems, sIndex) => {
return <li key={`${subItems}${sIndex}`}> {subItems}</li>;
})
}
• 避免使用连续的setState调用。相反，使用setState({ foo: value1, bar: value });一次性更新值。
结论
不变性是 React 中确保应用程序中数据完整性和一致性的重要原则。使用扩展运算符和先前状态来生成新状态并确保状态对象中的更新值。App.js 的完整优化代码可在此Github gist 文件中获取。祝您编码愉快！
了解更多
探索 Pluralsight 的这些 React 课程以继续学习：
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~