当一个映射组件发生变化时如何更新每个映射组件中的组件状态

如何解决当一个映射组件发生变化时如何更新每个映射组件中的组件状态

我正在制作一个基本的应用程序，其中将图像呈现到屏幕上。目标是不要多次单击同一图像。我在 App comp 中使用父状态来计算图像组件中的分数（第一次点击次数）和本地组件状态，以查看图像是否已被点击。 应用组件是这样的：

if [[ "${ARG//[IVXLCDM]/}" != "" ]]
then
        echo "Wrong input"
fi

我将 App 组件中的回调作为道具传递给图像组件以更改状态，如下所示。就留在我身边吧。 图像组件：

class App extends React.Component {
  state = { score: 0 };
  array = [1,2,3]

  handleScoreIncrement = (e) => {
    this.setState({ score: this.state.score + 1 })
    console.log(this.state.score)
  }

  handleRestart = () => {
    this.setState({ score: 0 })
  }

  render() {

    return (
      <div>
        <Header
          score={this.state.score} />
        {this.array.map((cv,i,arr) => {
          return (
            <div key={cv}>
              <Image
                score={this.state.score}
                increaseScore={this.handleScoreIncrement}
                restart={this.handleRestart}
              />
            </div>
          )
        })
        }

      </div>
    )

  }
};


export default App; 

现在的问题：我遇到的问题是，每次单击图像时，它都会正确递增，但是一旦我按了两次相同的图像，要重置游戏并重新开始，只有特定图像会改变它状态回到 {clickedAlready: false} （以便重新启动游戏），而其余的仍然说他们已被点击。如果在重置时，除双击之外的所有组件都保留其先前状态，我将无法重新启动游戏。 我希望我的 Image 组件中的事件处理程序会重置 Image comp 和 App 组件的状态，从而重新渲染这两个组件，但也许我遗漏了一些东西。请帮助

本质上，我希望当一个 Image 组件被双击时，所有 Image 组件都将它们的状态重新设置为 {clickedAlready: false}。

解决方法

主要更新内容：

图片

1. 当 componentDidUpdate 属性值更新为 clickedAlready 时，使用 score 重置 0 状态。这允许所有 Image 组件在父组件中重置 score 状态时“重置”。

   componentDidUpdate(prevProps) {
     if (prevProps.score !== this.props.score && this.props.score === 0) {
       this.setState({ clickedAlready: false });
     }
   }
   

2. 更新 handleClickEvent 以检查 clickedAlready 状态为回调以重置游戏或提高分数并更新点击状态。

   handleClickEvent = (e) => {
     const { clickedAlready } = this.state;
     const { increaseScore,restart } = this.props;
     if (clickedAlready) {
       alert("Clicked Already");
       restart();
     } else {
       increaseScore();
       this.setState({ clickedAlready: true });
     }
   };
   

沙盒演示中的完整代码

const Header = ({ score }) => <h1>Score: {score}</h1>;

class Image extends React.Component {
  state = {
    clickedAlready: false
  };

  componentDidUpdate(prevProps) {
    if (prevProps.score !== this.props.score && this.props.score === 0) {
      this.setState({ clickedAlready: false });
    }
  }

  handleClickEvent = (e) => {
    const { clickedAlready } = this.state;
    const { increaseScore,restart } = this.props;
    if (clickedAlready) {
      alert("Clicked Already");
      restart();
    } else {
      increaseScore();
      this.setState({ clickedAlready: true });
    }
  };

  render() {
    const { clickedAlready } = this.state;
    return (
      <div
        style={{ border: "1px solid red",marginTop: 5 }}
        onClick={this.handleClickEvent}
      >
        Image Would Go Here {clickedAlready && " - clicked"}
      </div>
    );
  }
}

class App extends React.Component {
  state = { score: 0 };
  array = [1,2,3];

  componentDidUpdate() {
    const { score } = this.state;
    console.log(score);
    if (score === this.array.length) {
      alert("Won");
      this.handleRestart();
    }
  }

  handleScoreIncrement = (e) => {
    this.setState({ score: this.state.score + 1 });
  };

  handleRestart = () => {
    this.setState({ score: 0 });
  };

  render() {
    return (
      <div>
        <Header score={this.state.score} />
        {this.array.map((cv,i,arr) => {
          return (
            <div key={cv}>
              <Image
                score={this.state.score}
                increaseScore={this.handleScoreIncrement}
                restart={this.handleRestart}
              />
            </div>
          );
        })}
      </div>
    );
  }
}

export default App;