如何更新 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;