刷新值反應不是動作后的值

Question

我在 React 工作了 2 個小時，我對編寫器如何正確分離組件有疑問，例如我有這些 windows

當我單擊“設置”按鈕時，我更改了值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 處理程序中更改（變異）state。

直接突變 state 可能會導致錯誤。

State 必須只能由 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 中，以下代碼是多余的，因為您設置的是相同的 state：

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

您已經在 onChangeNameFramework 處理程序中處理了框架名稱的更改。

我認為在這里同時使用 onSubmitText 和 onChangeNameFramework 處理程序似乎是不必要的，只有其中一個就足夠了。

操場：

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