Question

我试图在将元素（图标）悬停时更改背景图片的状态，但始终收到错误“ TypeError：无法读取未定义的属性“ icon””，这很奇怪，因为图标正在运行直到我将其悬停为止。

很高兴有人能帮忙。

状态：

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

方法：

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

接收图像的标题组件：

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

悬停的元素：

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

Answer 1

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

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

Answer 2

这是因为设置images时会丢失icon状态。尝试这样：

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

您正在散布旧的images，然后更新必要的属性。为什么我们使用setState回调和prevState？因为当我们设置新状态时，我们依赖于旧状态。

反应：更改onMouseOver的状态

2 个答案: