@qfrontend

Почему не перерисовывается компонент?

Приветствую) Почему не перерисовывается компонент?
В консоли видно что при нажатии на сундук меняется state родительского компонента "Content", так же видно что меняется props.text дочернего компонента "Message" , но не меняется его состояние state.text ... Почему, что не так? Помогите плиз

5c38d5df60be1953497862.jpeg
import React, { Component } from 'react';

class Message extends Component {
  constructor(props){
    super(props);
    this.state = { text: this.props.text }
  }
  render() {
    return (
      <div className="message">
        <p className="message__text">{this.state.text}</p>
      </div>
    );
  }
}

class Chests extends Component {
  state = {
    not: "Не тот сундук ",
    yes: "ОТличная интуиция! "
  }
  render() {
    return (
      <div className="chests">
        <div className="chest" onClick={()=>{this.props.changeMesagge(this.state.not)}}>
          сундук1
        </div>
        <div className="chest" onClick={()=>{this.props.changeMesagge(this.state.not)}}>
          сундук2
        </div>
        <div  className="chest" onClick={()=>{this.props.changeMesagge(this.state.yes)}}>
          сундук3
        </div>
      </div>
    );
  }
}

class Content extends Component {
  state = {
    text: "Угадай в каком сундуке Аркана?"
  }
  changeMesagge = (value)=>{
    this.setState({ text: value })
  }
  render() {
    let { text } = this.state
    return (
        <div className="content">
          <Message text={ text } />
          <Chests changeMesagge={ this.changeMesagge } />
        </div>
    );
  }
}

export default Content;
  • Вопрос задан
  • 90 просмотров
Пригласить эксперта
Ответы на вопрос 2
@dimoff66
Кратко о себе: Я есть
Потому что конструктор вызывается только при создании компонента, а не при его перерисовке. Вам не нужно в message переводить props в state, какой в этом смысл, если он все равно приходит от родителя и меняется в другом компоненте?

При рендеринге просто пишите
<p className="message__text">{this.props.text}</p>
Ответ написан
@curious-101
Frontend developer
Дмитрий всё верно написал. Добавлю лишь, что если по какой-то причине вам нужно держать text в state компонента Message, то для того, что бы он ререндерился после изменения пропсов изменяйте state в componentWillRecieveProps или можете добавить ключ этому компоненту:
<Message 
key={text}
text={ text }
 />
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы