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

Question

I am pretty new to react and can't wrap my head around how to go about doing this.

So I have my state as follows: 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;

Users.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;

How do I go about updating the count value via function, I can't figure out how to use this.setState to update the count while its nested. Any ideas? Thank you for any guidance.

Answer 1

1. You need to pass the id of the user, whose count is going to update.
2. Then you need to find that user and update it's count and then set the users state.

Here is the working app: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;

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;