如何使用 ReactJS 中的 setState 更新对象?

react jsjavascriptfront end technology

ReactJS 允许我们为每个组件定义一个状态对象。在状态对象中，我们可以将不同的变量添加为状态对象的属性。之后，我们可以使用组件内的状态变量来渲染或在组件中执行其他操作。

本教程将教我们为组件创建状态对象并使用各种值更新它。

使用 setState 更新 ReactJS 中的对象

状态对象与 ReactJS 中的类组件一起使用。使用 setState() 方法，我们可以更新状态对象。

语法

用户可以按照以下语法使用 setState() 方法更新 ReactJS 中的对象。

this.setState({
      student: {
        ...this.state.student,
        fees: new_value,
      },
    });

在上述语法中，我们将更新的学生对象作为 setState() 方法的参数传递。此外，我们还对学生对象使用了扩展运算符。

示例

在下面的示例中，我们在类组件中创建了状态对象。状态对象包含 number 属性，并使用 Math.random() 方法用随机数初始化。

每当用户单击按钮时，我们都会调用 changeNumber 函数。在 changeNumber() 函数中，setState() 方法用于更新状态对象。我们将带有新随机数的对象作为 setState() 方法的参数传递。

import React, { Component } from "react";
// 创建类组件
class App extends Component {
  state = {
    number: Math.random(),
  };

  // 更新对象的方法
  changeNumber = () => {
    this.setState({ number: Math.random() });
  };

  render() {
    return (
      <div>
        <h2>
          {" "}
          Generating the random number and updating it using the{" "}
          <i> setState() </i> method.{" "}
        </h2>
        <h3
          style={{
            border: "2px solid yellow",
            borderRadius: "10px",
            width: "22rem",
            height: "5rem",
            backgroundColor: "blue",
            color: "white",
            fontSize: "2rem",
          }}
        >
          <span>{this.state.number}</span>
        </h3>
        <button
          onClick= {this.changeNumber}
          style = {{
            border: "2px solid green",
            borderRadius: "10px",
            padding: "0.5rem 1rem",
            backgroundColor: "yellow",
            color: "black",
            fontSize: "1rem",
          }}
        >
          {" "}
          Generate random values{" "}
        </button>
      </div>
    );
  }
}

export default App;

输出

示例

在下面的示例中，表对象包含嵌套对象作为 student 属性的值。student 对象包含 id、name、age 和 fee 属性。

之后，每当用户按下按钮时，它都会调用 changesFees() 函数，该函数仅更改 student 对象中 fee 属性的值。用户可以看到我们如何在 setState() 方法中使用扩展运算符来保持 student 对象中的其他值不变。

import React, { Component } from "react";
// 创建类组件
class App extends Component {
  state = {
    student: {
      id: "123qwe",
      name: "Shubham",
      age: 22,
      fees: 200000,
    },
  };

  // 更新对象的方法
  changeFees = () => {
    
    this.setState({
      student: {
        ...this.state.student,
        fees: this.state.student.fees + this.state.student.fees * 0.2,
      },
    });
  };

  render() {
    return (
      <div>
        <h2>
          {" "}
          Updating the fees in the student object using the setState method
          <i> setState() </i> method.{" "}
        </h2>
        <h3
          style = {{
            border: "2px solid yellow",
            borderRadius: "10px",
            width: "22rem",
            height: "5rem",
            backgroundColor: "blue",
            color: "white",
            fontSize: "2rem",
          }}
        >
          <span> {this.state.student.fees} </span>
        </h3>
        <button
          onClick = {this.changeFees}
          style = {{
            border: "2px solid green",
            borderRadius: "10px",
            padding: "0.5rem 1rem",
            backgroundColor: "yellow",
            color: "black",
            fontSize: "1rem",
          }}
        >
          {" "}
          Change the fees of student{" "}
        </button>
      </div>
    );
  }
}

export default App;

输出

使用 ReactJS 中的钩子更新对象的状态

setState() 方法是更新 ReactJS 中状态对象的一种旧方法。近年来，ReactJS 中引入了钩子，我们可以使用它来更新 React 中的对象或变量值。

语法

用户可以按照以下语法使用钩子更新状态对象。

  const [state, setState] = useState({
    prop1: "Value1",
    prop2: "value2",
    prop3: "value3",
  });

setState((state) => ({ ...state, prop3: value }));

上述语法中定义了 setState() 方法来更新状态对象。在 setState() 方法中，我们已将回调函数作为参数传递。

示例

在下面的示例中，我们使用了 ReactJS 中的函数组件。我们使用状态来存储对象，并使用 setState 来更新状态对象。但是，用户可以为状态和 setState 指定其他名称。

我们将用户输入作为状态对象的 prop3 属性的值。之后，我们在 handleSubmit() 函数中更改状态对象的 prop3 属性的值。在 setState() 中，我们将前一个状态作为回调参数，并在回调函数中将其与扩展运算符一起使用。

import React, { useState } from "react";
const App = () => {
  const [state, setState] = useState({
    prop1: "Value1",
    prop2: "value2",
    prop3: "value3",
  });
  const [value, setValue] = useState("");

  function handleValue(e) {
    // 处理值
    let new_value = e.target.value;
    setValue(new_value);
  }

  function handleSubmit() {
    // 更新状态对象
    setState((state) => ({ ...state, prop3: value }));
  }
  return (
    <div>
      <h2>
        {" "}
        Using the <i> useState hooks </i> to update the objects in the state
      </h2>
      <h3>Enter the value to change for the prop3 of state object. </h3>
      <input type = "text" value = {value} onChange = {handleValue} />
      <div style = {{ color: "blue", fontSize: "1.5rem" }}>
        The key value pairs of the state object are : prop1 - {state.prop1},
        prop2 - {state.prop2}, prop3 - {state.prop3}
      </div>
      <button
        onClick = {handleSubmit}
        style = {{
          margin: "1rem 0",
          padding: "0.5rem 1rem",
          backgroundColor: "lightgreen",
          border: "2px dotted blue",
          borderRadius: "10px",
          color: "black",
          fontSize: "1.3rem",
          padding: "0.5rem",
        }}
      >
        Submit
      </button>
    </div>
  );
};

export default App;