刷新值反应不是动作后的值

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 处理程序中更改（变异）状态。

直接改变状态会导致错误。

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 中，以下代码是多余的，因为您设置的是相同的状态：

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

您已经在 onChangeNameFramework 处理程序中处理了框架名称的更改。

我认为在这里同时使用 onSubmitText 和 onChangeNameFramework 处理程序似乎没有必要，只需其中一个就足够了。

游乐场：

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