Реакция: изменение состояния onMouseOver

Question

Я пытаюсь изменить состояние фонового изображения при наведении на элемент (значок), но я всегда получаю сообщение об ошибке «TypeError: Не удается прочитать свойство« icon »из undefined», что странно, поскольку значок работает нормально, пока я не наведите это.

Рад, что кто-нибудь мог помочь.

Состояния:

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>

javascript reactjs

0

vinicius-bortoletto 29 Окт 2019 в 15:54

Answer 1

Эта проблема возникает из-за вашей функции onMouseOver, которая устанавливает новое значение для состояния, но удаляет значок из объекта изображений. Вам нужно запустить следующее:

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

3

sebastienbarbier 29 Окт 2019 в 13:12

Answer 2

Это потому, что когда вы устанавливаете images, вы теряете icon состояние. Попробуйте вот так:

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

Вы используете старый images, распространяя его, а затем обновляя необходимое свойство. Почему мы используем setState обратный вызов и prevState? Потому что, когда мы устанавливаем наше новое состояние, мы зависим от нашего старого состояния.

2

devserkan 29 Окт 2019 в 13:00

Реакция: изменение состояния onMouseOver

2 ответа

Похожие вопросы

Новые вопросы

javascript