使用 React 操作状态中的数组和对象

2020-11-04 08:00:00 · 飞浪

在 React 中，每个组件都可以处理自己的状态。本指南介绍如何使用对象和数组来操作状态。

介绍

每个应用的核心都是其状态。无论您使用哪种技术，您的应用都依赖于某种状态，无论是内存中、物理磁盘上还是其他位置。在 React 中，每个组件都可以处理自己的状态，这可能意味着单击按钮或文本输入的内容。这些组件通常被称为智能组件，而不处理状态的组件被称为哑组件。在本指南中，您将学习如何使用对象和数组来操作状态。坐稳了！

类组件中的状态

React 组件可以写为 ES6 类，并在构造函数中处理状态。

请考虑下面的代码片段。<MyComponent/>的构造函数中有一个状态对象，该函数在组件渲染之前调用。每当状态对象发生变化时，React 都会调用<MyComponent/>上的 render 方法。

      import React from 'react'

class MyComponent extends React.Component {
	constructor(props){
		super(props);
		this.state = { date: new Date(), name: 'Kofi'};	
	}

	render(){
		return(
			<div>
						<p> Hello {this.state.name} , it is {this.state.toLocaleTimeString()
						<p>Date: {this.state.date.toLocaleDateString()}
			</div>
		)
	}
}
    

功能组件中的状态（Hooks）

随着 React 16.8 中引入钩子，函数组件现在也可以以简化的方式处理状态。下面的代码片段是基于类的 < MyComponent/>，以函数组件的形式编写。useState钩子是一个函数，它接受默认值作为参数（可以为空），并返回一个包含状态和更新状态的函数的数组。数组解构用于从useState函数调用的结果中提取值。

      import React, {useState} from 'react';

function MyComponent(){

	const [date, setDate] = useState(new Date())
	const [name, setName] = useState("Kofi");

	return(
			<div>
						<p> Hello {date.name} , it is {date.toLocaleTimeString()
						<p>Date: {date.toLocaleDateString()}
						<button onClick={setDate(new Date())}></button>
			</div>
	)
}
    

操作数组

如果您将 React 应用与 API 集成，您可能希望将从 API 调用中获得的值存储在状态数组中，而不会丢失数组包含的先前值。扩展运算符可帮助您轻松实现这一点。仔细查看下面的代码片段，它通过“扩展” oldArray的内容在finalArray中实现了扩展运算符。

      const oldArray = ['peter piper', 'picked a pair']

const finalArray = [...oldArray, 'of pickle pepper']

console.log(finalArray)

// (3) ["peter piper", "picked a pair", "of pickle pepper"]

使用钩子，您可以轻松地将其应用于状态数组，如下所示。现在可以使用 map 函数使用这些值来呈现段落标签列表。

      import React, { useState, useEffect } from 'react';

const ProductsPage = () => {
  const [productsList, setProductsList] = useState([]);
  const [isLoading, setisLoading] = useState(true);

  useEffect(() => {
    fetch('http://127.0.0.1:8000/api/v1/products/all')
      .then((res) => res.json())
      .then((data) => setProductsList([...data]))
      .then(setisLoading(false));
  }, []);

	return (
    <>
      <Header />
      {isLoading ? (
        <div className='spinner-border text-primary' role='status'>
          {' '}
          <span className='sr-only'>Loading...</span>{' '}
        </div>
      ) : (
				productsList.map(product => {
							<p key={product.id}>{product.name}</p>
				})
      )}
    </>
  );
};

}
    

操控对象

对象也支持展开操作，就像上面的代码片段一样。让我们用对象展开来实现相同的代码。

      import React, { useState, useEffect } from 'react';

const ProductsPage = () => {
  const [productsList, setProductsList] = useState([]);
  const [isLoading, setisLoading] = useState(true);

  useEffect(() => {
    fetch('http://127.0.0.1:8000/api/v1/products/all')
      .then((res) => res.json())
      .then((data) => setProductsList({...data}))
      .then(setisLoading(false));
  }, []);

	return (
    <>
      <Header />
      {isLoading ? (
        <div className='spinner-border text-primary' role='status'>
          {' '}
          <span className='sr-only'>Loading...</span>{' '}
        </div>
      ) : (
				Object.keys(productList).map(product => {
							<p key={productList[product].id}>{productList[product].name}</p>
				})
      )}
    </>
  );
};

}
    

结论

就这样。您已经成功学习了使用对象和数组进行状态管理的技巧。现在，处理与状态相关的问题对您来说应该轻而易举了。如果您想进一步讨论这个话题，请在 Twitter 上关注我@DesmondNyamador。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文

使用 React 操作状态中的数组和对象

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

import React from 'react' class MyComponent extends React.Component { constructor(props){ super(props); this.state = { date: new Date(), name: 'Kofi'}; } render(){ return( <div> <p> Hello {this.state.name} , it is {this.state.toLocaleTimeString() <p>Date: {this.state.date.toLocaleDateString()} </div> ) } }

import React, {useState} from 'react'; function MyComponent(){ const [date, setDate] = useState(new Date()) const [name, setName] = useState("Kofi"); return( <div> <p> Hello {date.name} , it is {date.toLocaleTimeString() <p>Date: {date.toLocaleDateString()} <button onClick={setDate(new Date())}></button> </div> ) }

const oldArray = ['peter piper', 'picked a pair'] const finalArray = [...oldArray, 'of pickle pepper'] console.log(finalArray) // (3) ["peter piper", "picked a pair", "of pickle pepper"]

import React, { useState, useEffect } from 'react'; const ProductsPage = () => { const [productsList, setProductsList] = useState([]); const [isLoading, setisLoading] = useState(true); useEffect(() => { fetch('http://127.0.0.1:8000/api/v1/products/all') .then((res) => res.json()) .then((data) => setProductsList([...data])) .then(setisLoading(false)); }, []); return ( <> <Header /> {isLoading ? ( <div className='spinner-border text-primary' role='status'> {' '} <span className='sr-only'>Loading...</span>{' '} </div> ) : ( productsList.map(product => { <p key={product.id}>{product.name}</p> }) )} </> ); }; }

import React, { useState, useEffect } from 'react'; const ProductsPage = () => { const [productsList, setProductsList] = useState([]); const [isLoading, setisLoading] = useState(true); useEffect(() => { fetch('http://127.0.0.1:8000/api/v1/products/all') .then((res) => res.json()) .then((data) => setProductsList({...data})) .then(setisLoading(false)); }, []); return ( <> <Header /> {isLoading ? ( <div className='spinner-border text-primary' role='status'> {' '} <span className='sr-only'>Loading...</span>{' '} </div> ) : ( Object.keys(productList).map(product => { <p key={productList[product].id}>{productList[product].name}</p> }) )} </> ); }; }