当前位置：首页 > React

react如何修改值

2026-02-26 04:07:32React

修改 React 中的值

在 React 中修改值通常涉及状态管理，具体方式取决于组件的类型（函数组件或类组件）以及使用的状态管理工具（如 useState、useReducer 或 Redux）。

使用 `useState`（函数组件）

useState 是函数组件中最常用的状态管理 Hook，通过解构赋值获取状态变量和更新函数。

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // 初始值为 0

  // 直接调用 setCount 更新值
  const increment = () => setCount(count + 1);

  // 使用函数式更新（依赖前一个状态）
  const decrement = () => setCount(prevCount => prevCount - 1);

  return (
    <div>
      <p>当前值: {count}</p>
      <button onClick={increment}>增加</button>
      <button onClick={decrement}>减少</button>
    </div>
  );
}

使用 `this.setState`（类组件）

类组件通过 this.state 和 this.setState 管理状态。注意 setState 可能是异步的。

import React from 'react';

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  // 直接传入新值
  increment = () => this.setState({ count: this.state.count + 1 });

  // 使用函数式更新
  decrement = () => this.setState(prevState => ({
    count: prevState.count - 1
  }));

  render() {
    return (
      <div>
        <p>当前值: {this.state.count}</p>
        <button onClick={this.increment}>增加</button>
        <button onClick={this.decrement}>减少</button>
      </div>
    );
  }
}

修改对象或数组状态

当状态是对象或数组时，需确保不可变性（避免直接修改原状态）。

const [user, setUser] = useState({ name: 'Alice', age: 25 });

// 更新对象
const updateName = () => {
  setUser({ ...user, name: 'Bob' }); // 展开运算符复制原对象
};

// 更新数组
const [items, setItems] = useState([1, 2, 3]);
const addItem = () => {
  setItems([...items, 4]); // 创建新数组
};

使用 `useReducer`

对于复杂状态逻辑，useReducer 提供更集中的更新方式。

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>当前值: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>增加</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>减少</button>
    </div>
  );
}

使用上下文（Context）或全局状态管理

对于跨组件状态共享，可通过 useContext 或 Redux 等工具修改值。

react如何修改值

// 创建 Context
const CountContext = React.createContext();

function Parent() {
  const [count, setCount] = useState(0);
  return (
    <CountContext.Provider value={{ count, setCount }}>
      <Child />
    </CountContext.Provider>
  );
}

function Child() {
  const { count, setCount } = useContext(CountContext);
  return <button onClick={() => setCount(count + 1)}>增加 {count}</button>;
}