Можно ли менять state внешнего компонента через props?

Question

[Андрей]

Недавно столкнулся с проблемой - менять state через изменения во внутреннем компоненте. Я знаю, что можно передавать внутрь компонента внешнюю функцию, которая будет изменять через this.setState({ something: входной параметр });

Допустим:

// InnerComponent
// Тут код компонента
// Внутри компонента, допустим, на input'e, меняем this.props.text через onChange

Почему реакт позволяет менять, без ошибок, state внешнего компонента простым изменением props? Ведь менять можно лишь через this.setState?

// State of App component
this.state = {
    text: 'Hello world'
}

render() {
  return <InnerComponent text={this.state.text} />
}

Конкретная ситуация тут. (github)

Answer 1

[Антон Спирин]

1. Если попытаетесь изменить this.props, получите исключение:
Cannot assign to read only property
2. У вас есть возможность мутировать state, вот только делать это не нужно.

Хороший способ управления состоянием компонентов через родителя:

class Example extends Component {
  state = {
    inputValue: '',
  };

  handleChange = e => { 
    const { name, value } = e.target;
    
    this.setState({
      [name]: value,
    });
  };

  render() {
    const { inputValue } = this.state;

    return (
      <Wrapper>
        <input
          name="inputValue"
          value={inputValue}
          onChange={this.handleChange}
        />
        ...
      </Wrapper>
    );
  }

Comments

[Андрей]

По 1-му пункту
(не мой гит, мое приложение)
Тык
Работающее приложение без исключений говорит мне об обратном :(

[Андрей]

Возможно тут я, как раз-таки, мутировал state? Только мне казалось, что мутировать - это изменять напрямую)

[Антон Спирин]

Андрей, вы кажется не поняли, что там происходит.
Там компонент получает в props ссылку на массив который лежит в state.
А в хандлере меняется только содержимое элемента массива. state и props не меняются.
В вашем примере просто мутируется содержимое state. Смотрите пункт 2 моего ответа.

[Антон Спирин]

Андрей, да именно так. Это и есть изменение напрямую, просто через другие ссылки. Все по канонам JavaScript

[Андрей]

Антон Спирин, понял, спасибо.

[Андрей]

Антон Спирин, последний момент. Мне нужно было, чтобы значение в textarea синхронизировалось со state приложения. Как стоило правильно поступить в данном случае? Изменять нужно лишь содержимое элемента массива в state. Если не трудно :)

[Антон Спирин]

Андрей, так я пример сбросил. Состояние формы лучше не в массиве держать, а в объекте:

class Example extends Component {
  state = {
    form: {
      inputValue: '',
      textareaValue: '',
    },
  };

  handleChange = e => { 
    const { name, value } = e.target;
    
    this.setState(prevState => ({
      form: {
        ...prevState.form,
        [name]: value,
      },
    }));
  };

  render() {
    const { inputValue, textareaValue } = this.state;

    return (
      <Wrapper>
        <input
          name="inputValue"
          value={inputValue}
          onChange={this.handleChange}
        />

        <textarea
          name="textareaValue"
          value={textareaValue}
          onChange={this.handleChange}
        />
        ...
      </Wrapper>
    );
  }

Answer 2

[Игорь]

чисто пример, можно сделать красивее.

this.state = {
    text: 'Hello world'
}

handleChangeText = text => {
   this.setState({ text })
}

render() {
  return <InnerComponent handleChangeText={this.handleChangeText} text={this.state.text} />
}

const InnerComponent = ({ handleChangeText }) => {
  return (
    <div onClick={() => handleChangeText('some text')}>text</div>
  );
}

Comments

[Андрей]

Да, об этом моменте я сказал, что понимаю, как это делать "красиво". Меня смутил тот момент, что реакт не ругается на изменения state через props внутри другого компонента, причем прямым способом, через присваивание. А при обычном изменении state через присваивание - ругается, что нужно делать это через this.setState
Вот интересуюсь, что я важного упустил)

[Игорь]

Не ругается, потому что это js, тут можно все. Если напрямую поменять то компонент не запустит цепочку методов ререндера, не проверял, но поидее так будет. И нигде не написано, что оно не должно работать, просто по ссылке меняешь объект.
Из другого коммента: ошибка не показывается потому, что у проект запущен с NODE_ENV='production', в этом случае ошибки не отображаются.