React Как произвести setState для элемента объекта?

Question

Пожалуйста, помогите разобраться, как обновить состояния для определенного элемента в объекте. Есть вот такой упрощённый пример

import React from "react";
import "./styles.css";
import users from "./data";

import ChestsList from "./ChestsList/ChestsList";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      //// Data about some user
      userId: users[0].id,
      userName: users[0].name,
      bonusesStatus: users[0].bonusesStatus
    };
  }

  changeStatusOfChest = (val) => {
    this.setState({
      ...this.state,
      bonusesStatus: {
        val: {
          isAccess: false
        }
      }
    });
  }; ///// Этот изменение статуса как-то не правильно трабатывает 

  render() {
    return (
      <ChestsList
        bonusesStatus={this.state.bonusesStatus}
        changeStatusOfChest={this.changeStatusOfChest}
      />
    );
  }
}

export default App;

Не получается разобраться, как менять состояние для значения isAccess нужного бонуса по нажатию на кнопку? Подскажите, пожалуйста, как надо поправить функцию changeStatusOfChest что б по нажатию на кнопку бонуса, именное для указанного бонуса состояние выходило в false ? Ну и вместо кнопки показывалось сообщение Бонус получен

Answer 1

Вы не передали пропс в ChestsList, поэтому ChestItem не мог найти функцию.
Во вторых, вы заменяете массив элементов в стейте на только один элемент: bonusesStatus: { ...this.state.bonusesStatus, [val] ...

App.js:

import React from "react";
import "./styles.css";
import users from "./data";

import ChestsList from "./ChestsList/ChestsList";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      userId: users[0].id,
      userName: users[0].name,
      bonusesStatus: users[0].bonusesStatus
    };
  }

  changeStatusOfChest = (val) => {
    this.setState({
      ...this.state,
      bonusesStatus: {
        ...this.state.bonusesStatus,
        [val]: {
          ...this.state.bonusesStatus[val],
          isAccess: false
        }
      }
    });
  };

  render() {
    return (
      <ChestsList
        bonusesStatus={this.state.bonusesStatus}
        changeStatusOfChest={this.changeStatusOfChest}
      />
    );
  }
}

export default App;

ChestsList.js:

import React from "react";
import ChestItem from "./ChestItem";

function ChestsList({ bonusesStatus, changeStatusOfChest }) {
  const allBonuses = Object.values(bonusesStatus);
  return (
    <div>
      {allBonuses.map((el, index) => (
        <ChestItem
          key={index}
          index={index}
          isAccess={el.isAccess}
          bonusesLastUpdate={el.bonusesLastUpdate}
          bonusesNextAccess={el.bonusesNextAccess}
          changeStatusOfChest={changeStatusOfChest}
        />
      ))}
    </div>
  );
}

export default ChestsList;

ChestItems.js:

import React from "react";

function ChestsItem({ index, isAccess, changeStatusOfChest }) {
  function getBonus() {
    changeStatusOfChest(index + 1);
  }

  return (
    <div>
      <p>Chest # {index}</p>
      {isAccess ? (
        <button onClick={(el) => getBonus()}>Получить бонус</button>
      ) : (
        <div>Бонус получен</div>
      )}
    </div>
  );
}

export default ChestsItem;

БЛОГ НА HUSL

React Как произвести setState для элемента объекта?

Ответы (1 шт):