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处理程序，只需其中之一就足够了。

游乐场：

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

刷新值反应后无效

1 个答案: