反应：改变 state onMouseOver

Question

我试图在悬停元素（图标）时更改背景图像 state 但我总是收到错误“TypeError：无法读取未定义的属性“图标””，这很奇怪，因为图标工作正常，直到我hover吧。

很高兴有人能提供帮助。

状态：

this.state = {
      images: {
        header: "path to img",
        icon: "path to icon"
      }
}

方法：

 handleMouseOver = () => {
    this.setState({
      images: {
        header: "new img"
      }
    });
  };

Header组件接收镜像：

<Header bgImg={this.state.images.header} />

悬停元素：

<div>
   <img onMouseOver={this.handleMouseOver} src={this.state.images.icon} />
</div>

Answer 1

此问题来自您的onMouseOver function，它为 state 设置了一个新值，但从图像 object 中删除了图标。 您需要运行以下命令：

 handleMouseOver = () => {
    this.setState((state, props) => {
      return {
         images: {
           header: "new img",
           icon: state.images.icon
         }
      };
    });
  };

Answer 2

这是因为当您设置images时，您会丢失icon state。 试试这样：

handleMouseOver = () => {
  this.setState(prevState => ({
    images: {
      ...prevState.images,
      header: "new img"
    }
  }));
};

您通过传播旧图像使用旧images ，然后更新必要的属性。 为什么我们使用setState回调和prevState ？ 因为当我们设置新的 state 时，我们依赖于旧的 state。