Реакция - установка состояния компонента с использованием функции вне состояния, это неправильно?

Question

Это неправильно использовать setState в функции вне компонента React?

Пример:

// myFunction.js
function myFunction() {
  ...
  this.setState({ ... })
}

// App.js
import myFunction from './myFunction

class App extends Component {
  constructor() {
    super()
    this.myFunction = myFunction.bind(this)
  }

  ...
}

Answer 1

Это похоже на ошибку, ожидающую наступления ... Если вы хотите использовать внешнюю функцию для установки состояния, вы можете использовать альтернативный синтаксис, предоставленный React:

this.setState((prevState, props)  => {
  return updatedState; //can be a partial state, like in the regular setState
});

Этот обратный вызов может быть легко извлечен во внешнюю функцию, и он гарантированно будет работать

Answer 2

Это не так, функция никогда не вызывается вне компонента. Это смешанная техника. bind не требуется, если функция не используется в качестве обратного вызова. В этом случае myFunction одинаково для всех случаев, более эффективный способ будет:

class App extends Component {}
App.prototype.myFunction = myFunction;

Answer 3

Таким образом, единственные причины для этого, если вы сокращаете повторяющийся код, например, два компонента используют одну и ту же логику перед вызовом this.setState или, если вы хотите упростить тестирование, имея отдельную чистую функцию для тестирования. По этой причине я рекомендую не вызывать this.setState во внешней функции, а скорее возвращать нужный вам объект, чтобы вы могли вызвать this.setState для него.

function calculateSomeState(data) {
  // ...
  return { updated: data };
}

class MyComponent extends React.Component {
    constructor(props) {
      super(props)
      this.state = calculateSomeState(props.data);
    }

    handleChange = (e) => {
        const value = e.target.value;
        this.setState(calculateSomeState({ ...props.data, value }));
    }
}

Answer 4

Я не уверен, что способ, которым вы привязываете, будет на самом деле работать. Вы можете сделать что-то вроде:

export const getName = (klass) => {
  klass.setState({ name: 'Colin'})
}

тогда

class App extends Component {
  state = {
    name: 'React'
  };

  handleClick = () => {
    getName(this);
  }

  render() {
    return (
      <div>
        <p>{this.state.name}</p>
        <button onClick={this.handleClick}>change name</button>
      </div>
    );
  }
}

Рабочий пример здесь .