反应改变地图功能中整个元素的状态，而不仅仅是按下的按钮

Question

大家好，我正在尝试通过上下文 api 组件将方法传递给另一个组件，我在那里有一个映射函数。我希望我的 showInfo 状态根据单击按钮更改为 true 或 false，当我单击按钮时，我状态的所有 showInfo 都会更改，所以这不是我想要的，我希望当我按下它时更改特定项目.有人可以解释我在哪里犯的错误吗？

我的上下文 APİ

import React from "react";

export const ToursContext = React.createContext();

class ToursContextProvider extends React.Component {
  constructor(props) {
    super(props);
    this.changeState = this.changeState.bind(this);
    this.state = {
      tours: [
        {
          id: 0,
          imageURL:
            "https://images.unsplash.com/photo-1524231757912-21f4fe3a7200?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1351&q=80",
          title: "İstanbul'un Güzelliğinin Sadece Bir Parçası Galata Kulesi",
          showInfo: true,
          info: "LOREM İPSUM AMET 1",
        },
        {
          id: 1,
          imageURL:
            "https://images.unsplash.com/photo-1541432901042-2d8bd64b4a9b?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1319&q=80",
          title: "Tarihi Süleymaniye Camii",
          showInfo: true,
          info: "LOREM İPSUM AMET 2",
        },
      ],
    };
  }

  changeState(itemdelete) {
    this.setState({
      showInfo: !this.state.showInfo,
    });
    console.log(itemdelete);
  }

  render() {
    return (
      <ToursContext.Provider
        value={{ ...this.state, changeState: this.changeState }}
      >
        {this.props.children}
      </ToursContext.Provider>
    );
  }
}

export default ToursContextProvider;

我的地图列表组件

import React from "react";
import { ToursContext } from "../contexts/Tours";

function Tours() {
  return (
    <div className="container">
      <div className="row">
        <ToursContext.Consumer>
          {(value) => {
            const { changeState } = value;

            return value.tours.map((item) => (
              <div className="col-md-4" key={item.id}>
                <div className="card bg-dark text-white">
                  <img src={item.imageURL} className="card-img" alt="..." />
                  <div className="card-img-overlay">
                    <h5 className="card-title">{item.title}</h5>
                    <button
                      type="button"
                      onClick={changeState.bind(this, item)}
                      className="btn-sm btn-primary"
                    >
                      Bilgiyi Göster!
                    </button>
                  </div>
                  {value.showInfo ? "true" : "false"}
                </div>
              </div>
            ));
          }}
        </ToursContext.Consumer>
      </div>
    </div>
  );
}

export default Tours;

Answer 1

你的状态是原子的。这意味着它被视为单个值。使用类，您可以选择部分修改 状态对象 。例如，您有包含字段 a 和 b 的对象。您可以一次更改两个字段，仅 a 或 b。但是没有选项可以深度修改状态。假设您有这样的状态对象：

{
  "a": { "subfield_1": [], "subfield_2": "some string"},
  "b": 3
}

你又可以修改a或b，但如果你想将项目添加到数组a.subfield_1或更改a.subfield_2，你将不得不修改整个a，像这样：

setState({
  a: {
    ...a,
    subfield_1: this.state.a.subfield_1.concat("new item"),
  },
});

在您的情况下，要更改 tours 键中的某些内容，您将必须修改整个 tours 键。它会是这样的：

changeState(itemdelete) {
  this.setState({
    tours: tours.map((item) =>
      item.id !== itemdelete.id ? item : { ...item, showInfo: !item.showInfo }
    ),
  });
}

反应改变地图功能中整个元素的状态，而不仅仅是按下的按钮

React changing the states of the whole elements in the map function, not only the button that is pressed

javascript

setstate

reactjs

react-context