如何更新 React 中的嵌套状态？

Question

我对做出反应还很陌生，无法理解如何 go 这样做。

所以我有我的 state 如下： Main.js

import React, { Component } from "react";
import Users from "./Users";

class App extends Component {
  state = {
    users: [
      { id: 0, name: "a", count: 0 },
      { id: 1, name: "b", count: 0 },
      { id: 2, name: "c", count: 0 },
    ],
  };

  increment = (id) => {
    this.setState({
      // No idea how to interface this
    });
  };

  render() {
    return (
      <div className="App container">
        <h1 className="center blue-text">Counter</h1>
        <Users users={this.state.users} increment={this.increment} />
      </div>
    );
  }
}

export default App;

用户.js

import React from "react";

const Users = ({ users, increment }) => {
  const userList = users.map((user) => {
    return (
      <div className="collection-item" key={user.id}>
        <p>
          {user.name} : {user.count}{" "}
        </p>
        <button onClick={() => increment(user.count)}>+</button>
      </div>
    );
  });

  return <div className="users collection">{userList}</div>;
};

export default Users;

我如何 go 关于通过 function 更新计数值，我不知道如何使用 this.setState 在嵌套时更新计数。 有任何想法吗？ 感谢您的任何指导。

Answer 1

1. 您需要传递用户的 ID，其计数将更新。
2. 然后您需要找到该用户并更新其计数，然后设置用户 state。

这是工作应用程序：https://codesandbox.io/s/nifty-resonance-ek411?file=/src/App.js

main.js

import React, { Component } from "react";
import Users from "./Users";

class App extends Component {
  state = {
    users: [
      { id: 0, name: "a", count: 0 },
      { id: 1, name: "b", count: 0 },
      { id: 2, name: "c", count: 0 }
    ]
  };

  increment = id => {
    // find to user to update
    const userIndex = this.state.users.findIndex(user => user.id === id);
    // for invalid id
    if (userIndex < 0) {
      return;
    }
    const userToUpdate = this.state.users[userIndex];
    const updatedUsers = [...this.state.users];
    // update the user on that index
    updatedUsers[userIndex] = {
      ...userToUpdate,
      count: userToUpdate.count + 1
    };
    /// update the user state
    this.setState({ users: updatedUsers });
  };

  render() {
    return (
      <div className="App container">
        <h1 className="center blue-text">Counter</h1>
        <Users users={this.state.users} increment={this.increment} />
      </div>
    );
  }
}

export default App;

应用程序.js

import React from "react";

const Users = ({ users, increment }) => {
  const userList = users.map(user => {
    return (
      <div className="collection-item" key={user.id}>
        <p>
          {user.name} : {user.count}{" "}
        </p>
        <button onClick={() => increment(user.id)}>+</button>
      </div>
    );
  });

  return <div className="users collection">{userList}</div>;
};

export default Users;