在 React 中使用动态键设置和访问状态

Set and Access state using a Dynamic key in React

使用方括号表示法在 React 中使用动态键设置和访问状态，例如setEmployee({...employee, [key]: employee.salary + 100}). 方括号中的变量或表达式将在设置状态之前进行评估。

应用程序.js


import {useState} from 'react';

const App = () => {
  const [employee, setEmployee] = useState({id: 1, name: 'Alice', salary: 100});

  const key = 'salary';

  // ✅ access state using dynamic key
  console.log(employee[key]); // 👉️ 100

  const handleClick = () => {
    // ✅ set state using dynamic key
    setEmployee({...employee, [key]: employee.salary + 100});
  };

  return (
    <div>
      <button onClick={handleClick}>Increase salary</button>

      <h2>id: {employee.id}</h2>
      <h2>name: {employee.name}</h2>
      <h2>salary: {employee.salary}</h2>
    </div>
  );
};

export default App;

反应使用状态动态键

我们将动态密钥包裹在方括号中，以便在更新状态时对其进行评估。

key变量将被评估，属性salary的值salary将在状态对象中更新。

请注意，此语法不是 React.js 特定的，这是纯 JavaScript。

应用程序.js


const emp = {id: 2, name: 'Bob', salary: 100};

const key = 'salary';

console.log(emp[key]); // 👉️ 100

const newEmp = {
  [key]: 200, // 👈️ using dynamic key
};

console.log(newEmp); // 👉️ {salary: 200}

您还可以使用逻辑或连接字符串来形成动态键。

应用程序.js


const start = 'sal';
const end = 'ary';

const newEmp = {
  [start + end]: 200,
};

// 👉️ {salary: 200}

同样，您可以调用一个函数来获取动态密钥。

应用程序.js


function getKey() {
  return 'salary';
}

const newEmp = {
  [getKey()]: 200,
};

console.log(newEmp); // 👉️ {salary: 200}

使用动态键设置 React 组件状态的语法是相同的。

应用程序.js


import {useState} from 'react';

const App = () => {
  const [employee, setEmployee] = useState({id: 1, name: 'Alice', salary: 100});

  const handleClick = () => {
    function getKey() {
      return 'salary';
    }

    // 👇️ call function to get dynamic key
    setEmployee({...employee, [getKey()]: employee.salary + 100});
  };

  return (
    <div>
      <button onClick={handleClick}>Increase salary</button>

      <h2>id: {employee.id}</h2>
      <h2>name: {employee.name}</h2>
      <h2>salary: {employee.salary}</h2>
    </div>
  );
};

export default App;

–