Question

我在代码中两次使用了setstate（）。首先，该方法在单击图像时执行。更新状态后，我正在调用另一个方法，因为我正在使用更新状态来设置其他元素的状态。第一次单击该代码即可正常工作。当我再次单击图像时，它不起作用。

import Heart from '../../assets/images/heart.png';
import yelloHeart from '../../assets/images/yello_heart.png';

 state = {
        heartImage: Heart,
        heartClicked: false
    }

 imageClickedHandler = () => {
        this.setState(state => ({ heartClicked: !state.heartClicked }));
        this.changeImage();

    }

 changeImage = () => {
        if (this.state.heartClicked) {
            this.setState({ heartImage: yelloHeart })
        }
    }

  <img onClick={this.imageClickedHandler} src={this.state.heartImage} alt="heart" />

第二次单击，我得到正确的输出。但是我希望图像每次都能切换。

Answer 1

这是您遇到的常见陷阱。来自docs：

setState（）并不总是立即更新组件。它可能批处理或将更新推迟到以后。这使得阅读this.state 在调用setState（）之后立即发生潜在的陷阱。相反，使用 componentDidUpdate或setState回调（setState（updater，回调）），保证在更新后都会触发已应用。如果您需要根据之前的状态设置状态状态，请阅读下面的updater参数。

所以您可以做的一件事是：

imageClickedHandler = () => {
    this.setState(state => ({
        heartClicked: !state.heartClicked
    }), () => { //  We used callback based version, the callback will fire once the state is set.
        this.changeImage() 
    });

}

Answer 2

我为此功能使用一种状态。


function App() {
  const [clicked, setClicked] = useState(false);

  return (
    <div className="App">
      <h1>setState example</h1>
      <img
        style={{
          height: 200,
          width: 200
        }}
        onClick={() => setClicked(clicked => !clicked)}
        src={clicked ? redHeart : heart}
        alt="heart"
      />
    </div>
  );
}

您可以在代码和框中签入。 https://codesandbox.io/s/intelligent-worker-00v2b?fontsize=14

单击图像后setState不更新

2 个答案: