如何在每个映射组件发生变化时更新组件状态

Question

我正在制作一个将图像呈现到屏幕上的基本应用程序。 objective 是不要多次点击同一张图片。我在 App comp 中使用父状态来计算图像组件中的分数（首次点击次数）和本地组件状态，以查看图像是否已被点击。 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;

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

class Image extends React.Component {

  state = {
    clickedAlready: false,
    score: this.props.score
  }


  handleRestart = () => {
    this.props.restart();
    if (this.props.score === 0) {
      this.setState({ clickedAlready: false })
    }
  }


  handleClickEvent = (e) => {
    if (this.state.clickedAlready) {
      alert('Clicked Already')
      this.handleRestart()
      this.setState({ clickedAlready: false })
    } else {
      this.props.increaseScore();
      this.setState({ clickedAlready: true })
    }
    console.log(this.state.score)
  }


  render() {
    return (
      <div
        style={{ border: '1px solid red', marginTop: 5 }}
        onClick={this.handleClickEvent}>Image Would Go Here
      </div>
    )
  }
}


export default Image;

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

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

Answer 1

要更新的主要内容：

图片

当 score 属性值更新为 0 时，使用 componentDidUpdate 重置 clickedAlready 状态。这允许所有 Image 组件在父组件中重置 score 状态时“重置”。
```
componentDidUpdate(prevProps) {
  if (prevProps.score !== this.props.score && this.props.score === 0) {
    this.setState({ clickedAlready: false });
  }
}
```

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

如何在每个映射组件发生变化时更新组件状态

How to Update Component State in Each of Mapped Components When One Changes

javascript

event-handling

reactjs

react-component

react-state-management