push() 方法是在数组末尾添加一个或多个元素并返回数组的新长度的过程。通常, push 方法有助于将值添加到数组中。使用括号表示法为对象分配一个甚至多个键值对是一种方便的选择。

使用 push 方法可以轻松分配该值。它们是将对象添加到数组末尾的合适选项。 React hooks 允许更简单的代码,即使没有任何麻烦,也适合更快地实现类似的功能。这些是实现 React 状态和生命周期方法的合适选项,即使不使用任何编写类。

需要添加推送方式吗?

通常,Push 方法使用 call() 或 apply() 对象,它们以独特的方式类似于数组。 Push 方法尤其依赖于属性的长度,该长度很容易确定更好的属性来开始插入值。

当length属性不转换为数字时,它的索引为0。尤其包括长度不存在的可能性。在此过程中将创建长度案例。

字符串是原生的,因此类似数组的对象在应用程序中不是合适的选项。这些字符串是不可变的,并为卓越提供了合适的解决方案。类似数组的对象参数是一种轻松确定卓越策略的合适方法。

当你想在 React 钩子中添加 push 方法时,雇佣 React js 开发人员是一个方便的选择,没有任何麻烦。使用 React 的 useState() 钩子来更新数组是非常必要的,并且这些不会添加 Array 对象的 push() 方法。扩展运算符是此过程的一个非常方便的选择。

push(element0)
push(element0, element1)
push(element0, element1, /* ... ,*/ elementN)

进入全屏模式 退出全屏模式

如何使用 UseState() 创建数组状态?

返回值涉及对象的新长度属性,该属性有助于使用 useState() 轻松创建 Array 状态。使用 useState() 钩子来启用数组状态变量是非常必要的。

import React from "react";
const { useState } = React;
const [myArray, setMyArray] = useState([]);

进入全屏模式 退出全屏模式

useState() 钩子的返回值获取包含状态数组的变量以及用于轻松更新每个属性的唯一方法。通常,如果不使用 useState() 方法,很难更新数组。

添加状态数组的新元素是一个非常方便的选择。当此状态在数组中时,将新元素添加到数组中将是一个非常方便的选择

myArray.push(1)

进入全屏模式 退出全屏模式

使用 React 时,使用从 useState 返回的最佳方法来轻松更新数组是一个非常方便的选择。 update 方法或 setMyArray() 有助于更新状态,即使是通过使用 JavaScript 的 Spread 运算符中的新元素组合旧数组而创建的新数组。使用 useState 更新方法从旧数组创建新数组是一个非常方便的选项。

setMyArray(oldArray => [...oldArray, newElement]);

进入全屏模式 退出全屏模式

以旧数组作为第一个参数启用的功能,使用第一种方法很方便。它还可以更好地访问带有状态对象的旧数组。

onChange = value => checked => {
   this.setState({ checked }, () => {
     this.setState(prevState => {
       Object.assign(prevState.permission, { [value]: this.state.checked });
      });
    });
  };

<CheckboxGroup
           options={options}
           value={checked}
           onChange={this.onChange(this.props.label)}
         />

进入全屏模式 退出全屏模式

使用 Hooks 在 React 状态下添加数组:

.push() 函数不适用于更新 React 中的状态,但 .concat() 函数有助于快速更新,即使没有任何麻烦。 JavaScript 数组状态可以通过扩展运算符轻松启用。有很多方法可以轻松地在 React 状态的数组中添加项目。

直接改变状态不是一个方便的选择,因此将项目推送到数组中不是一个方便的选择。数组中的 React 状态允许使用 React Hooks 轻松更新状态。使用 React 状态的数组存储 JavaScript 对象将是一个更方便的选择。

• 1. push() 方法将新项目添加到数组的末尾

• 2. push() 方法改变数组的长度

• 3. push() 方法返回新的长度

例如,useState 是一个钩子,这些是通过功能组件启用的,让您可以轻松地为本地状态添加额外的功能。 React 将是在重新渲染之间保留状态的合适选择。

这些被称为 useState Hook,因此命令 useState([]) 将自动初始化包含空数组的状态。该数组是传递 useState() 的有效参数,它显示为

import React, { useState } from "react"
           import ReactDOM from "react-dom"       
           function App() {
           // React Hooks declarations
           const [searches, setSearches] = useState([])
           const [query, setQuery] = useState("")
           const handleClick = () => {
           // Save search term state to React Hooks
           }
           // ...

进入全屏模式 退出全屏模式

将回调传递给生成新数组的 State Setter 函数

我们可以传入一个回调,该回调返回一个新数组,其末尾添加了新项目,以使用末尾的新元素更新状态数组。

import React, { useState } from "react";

export default function App() {
  const [arr, setArr] = useState(["Demo"]);
  return (
    <div classname="App">
      <button onclick="{()" ==""> setArr((oldArray) => [...oldArray, "Demo"])}>
        Click Here
      </button>
      <div>
        {arr.map((a, i) => (
          <p key="{i}">{a}</p>
        ))}
      </div>
    </div>
  );
}

进入全屏模式 退出全屏模式

为什么 .Push() 使用 React Hooks 失败?

通常,React Hooks 是通过 setSearches() 的主要功能来启用的,它们被称为 reducer。这是更新传递的当前值状态的便捷选项。这些属性使用数组中的数字进行更新,称为 TypeError,它提供搜索。 Map React 的状态被替换为 [] 的状态以及数组的方法,并且这些是通过 .push 启用的,因此 .length 为 1。

当 .map() 工作时,代码 1.map() 不适用于 JavaScript。

它不是更改旧状态,而是使用 React Hooks 状态设置器或称为 setSearches 的 reducer 函数更新状态的一个非常方便的选项。救援将在 Array 的过程中进行。在 .push() 中工作的 Prototype.Concat() 方法。

Reason.concat() 通过创建新数组来更新状态。它会自动使旧阵列完好无损。这些将自动为更改后的数组提供更好的回报。

setSearches([query].concat(searches)) // 添加到 React State

JavaScript 扩展运算符是一个合适的选项,可以轻松地为您提供组合数组。这些用于将项目添加到 React 状态的数组中。

[...searches, query] 将一个项目附加到数组的末尾

[query, ...searches] 将项目添加到数组的前面

// 使用扩展运算符和包装函数将搜索词状态保存到 React Hooks

// 使用 .concat(),没有包装函数(不推荐)

setSearches(searches.concat(query))

// 使用 .concat(),包装函数(推荐)

setSearches(搜索 u003d> searchs.concat(查询))

// 扩展运算符,无包装函数(不推荐)

setSearches([...搜索,查询])

// 扩展运算符,包装函数(推荐)

setSearches(搜索 u003d> [...搜索,查询])

实现 State Setter 函数

我们可以传递一个回调来接收状态的旧值并将新值传递给 useState 返回的状态设置器函数。

为了将我们希望推送的元素添加到数组的末尾,我们可以简单地返回数组的副本。

import { useState } from "react";

export default function App() {
  const [arr, setArr] = useState([0]);

  return (
    <div classname="App">
      <button onclick="{()" ==""> setArr((arr) => [...arr, arr[arr.length - 1] + 1])}
      >
        push
      </button>
      <p>{JSON.stringify(arr)}</p>
    </div>
  );
}

进入全屏模式 退出全屏模式

结论:

我们可以向 state setter 函数发送一个回调,该函数接收旧数组值并返回新数组值,以便更新 React 组件状态数组,并在其末尾添加一个新项目。

上面,我们学习了如何使用 Push 函数,尤其是 useState 钩子,在 React 中改变数组状态。这些是向 JavaScript 数组添加新元素的适当方法。