Обновить значение реагировать, а не значение после действия

Question

Я нахожусь в работе React на 2 часа, и у меня есть проблема с тем, как писатель правильно разделяет компонент, например, у меня есть эти окна

Когда я нажимаю кнопку «Установить», я изменяю значение this.state.nameFramework. Если я пишу весь код внутри компонента App, моя helloApp работает, но если я пишу код в отдельном компоненте, он не будет работать в данный момент времени, нодля изменения значения переменной this.state.nameframework я перезагрузил страницу.

Мой код

require('normalize.css/normalize.css');
require('styles/App.css');

import React from 'react';
import InputFramework from 'components/InputFramework';
import ListPerson from 'components/ListPerson';

const list = [
  {
    objectID: 1,
    'name': 'Vincenzo',
    'surname': 'Palazzo'
  },
  {
    objectID: 2,
    'name': 'Sara',
    'surname': 'Durante'
  }
];

let name = 'Vincent';
let nameFramework = 'React';

class AppComponent extends React.Component {

  constructor(props){
    super(props);
    this.state = {
      list,
      name,
      nameFramework
    };

    this.onSelectPerson = this.onSelectPerson.bind(this);
    this.onSubmitText = this.onSubmitText.bind(this);
    this.onChangeNameFramework = this.onChangeNameFramework.bind(this);
  }

  onSubmitText(){
    this.setState({nameFramework: this.state.nameFramework});
  }

  onChangeNameFramework(name){
    this.state.nameFramework = name;
  }

  onSelectPerson(name) {
    this.setState({name: name});
  }

  render() {
    //This is no good for my programmer style, resolve it please
    return (
      <div className="index">
        <InputFramework
                  name={this.state.name}
                  nameFramework={this.state.nameFramework}
                  onChange={this.onChangeNameFramework}
                  onClick={this.onSubmitText}
        />
        <ListPerson
          onClick={this.onSelectPerson}
        list={this.state.list}/>
      </div>
    );
  }
}

AppComponent.defaultProps = {
};

export default AppComponent;

Компонент ввода

    require('normalize.css/normalize.css');
    require('styles/App.css');

    import React from 'react';


    class InputFramework extends React.Component {

      constructor(props){
        super(props);
      }

      render() {
        //This is no good for my programmer style, resolve it please
        //The nameFramework not update
        let {onChange, onClick, name} = this.props;
        return (
          <div className='index'>
            <h1>Hello my name is {name} and I'm learning {this.props.nameFramework}</h1>
            <from>
              <input type='text'
                     onChange={event => onChange(event.target.value)}/>
              <button type='submit' onClick={() => onClick}>Set</button>
            </from>
          </div>
        );
      }
    }

    InputFramework.defaultProps = {};

    export default InputFramework;

Компонент списка

require('normalize.css/normalize.css');
require('styles/App.css');

import React from 'react';

class ListPerson extends React.Component {

  constructor(props){
    super(props);

  }

  render() {
    //This is no good for my programmer style, resolve it please
    const {onClick, list} = this.props;
    return (
      <div className="index">
        <ul>
          {list.map(function(item){
            return (
              <li key={item.objectID}>
                {item.name}
                <button type='button' onClick={() => onClick(item.name)}>Select</button>
              </li>
            )
          })}
        </ul>
      </div>
    );
  }
}

ListPerson.defaultProps = {
};

export default ListPerson;

Если это проблема в том, как писать код, теперь я прошу вас, чтобы у вас было больше опыта, чем у меня, вы можете помочь мне разобраться.

Answer 1

Вы пытаетесь изменить (изменить) состояние непосредственно в обработчике onChangeNameFramework.

Непосредственное изменение состояния может привести к ошибкам.

Состояние должно быть изменено только this.setState, поэтому оно должнобыть таким:

  onChangeNameFramework(name){
    this.setState({
      nameFramework: name
    })
  }

Вот документы:

https://reactjs.org/docs/state-and-lifecycle.html#do-not-modify-state-directly

Другая проблема заключается в компоненте InputFramework, когда вы отправляете форму, страница перезагружается вЧтобы предотвратить это, вы должны добавить e.preventDefault () следующим образом:

class InputFramework extends React.Component {

  render() {
    //This is no good for my programmer style, resolve it please
    //The nameFramework not update
    let {onChange, onClick, name} = this.props;

    const handleClick = (e) => {
      e.preventDefault();
        onClick();
    }

    return (
      <div className='index'>
        <h1>Hello my name is {name} and I'm learning {this.props.nameFramework}</h1>
        <form>
          <input type='text'
                 onChange={event => onChange(event.target.value)}/>
          <button type='submit' onClick={handleClick}>Set</button>
        </form>
      </div>
    );
  }
}

Наконец, в AppComponent следующий код является избыточным, поскольку вы устанавливаете то же состояние:

  onSubmitText(){
       this.setState({nameFramework: this.state.nameFramework});
  }

Выуже обрабатывает изменение имени фреймворка в обработчике onChangeNameFramework.

Я думаю, что использование обоих обработчиков onSubmitText и onChangeNameFramework кажется здесь ненужным, достаточно только одного из них.

Playground:

https://codesandbox.io/s/blue-frost-qutb0