JIYIK CN >

Use square bracket notation to set and access state in React using dynamic keys, e.g. setEmployee({...employee, [key]: employee.salary + 100})Variables or expressions within the square brackets will be evaluated before the state is set.

import {useState} from 'react';

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

  const key = 'salary';

  // ✅ 使用动态键访问状态
  console.log(employee[key]); // 👉️ 100

  const handleClick = () => {
    // ✅ 使用动态键设置状态
    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;

We wrap the dynamic key in square brackets so that it will be evaluated when updating the state.

The key variable will be evaluated as salary and salarythe value of the attribute will be stateupdated in the state object.

请注意, this syntax is not React.js specific, this is pure JavaScript.

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}

We can also use logical or to concatenate strings to form dynamic keys.

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

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

// 👉️ {salary: 200}

Likewise, we can call a function to get the dynamic key.

function getKey() {
  return 'salary';
}

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

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

The syntax for setting React component state using dynamic keys is the same.

import {useState} from 'react';

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

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

    // 👇️ 调用函数获取动态键
    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;