Состояние разрушения / реквизит в React - PullRequest
Новая
       9

Состояние разрушения / реквизит в React

0 голосов
/ 28 августа 2018

Я изучаю React, и у меня установлен Eslint в моем проекте. Это начало давать мне ошибки вроде 

Use callback in setState when referencing the previous state. (react/no-access-state-in-setstate)
Must use destructuring state assignment (react/destructuring-assignment)

Я пытался найти это, но не мог правильно понять.

Может ли кто-нибудь указать мне правильное направление с этим?

Вот мой код, который выдает ошибки: 

class LoginForm extends React.Component {
  state = {
    data: {
      email: "",
      password: "",
    },
    loading: false,
    errors: {},
  };

  onChange = e =>
    this.setState({
      data: { ...this.state.data, [e.target.name]: e.target.value },
    });

  onSubmit = () => {
    const errors = this.validate(this.state.data);
    this.setState({ errors });

    if (Object.keys(errors).length === 0) {
      this.setState({ loading: true });
      this.props
        .submit(this.state.data)
        .catch(err =>
          this.setState({
            errors: err.response.data.errors,
            loading: false,
          }),
        );
    }
  };
}

Как я понимаю, мне нужно будет деструктировать this.state и this.props, но как?

EDIT: Следуя предложенным ниже советам, я закончил с этим. Все, что мне нужно исправить, это реквизит. Меня просят использовать деструктурирующее задание. 

onChange = ({ target: { name, value } }) =>
    this.setState(prevState => ({
        data: { ...prevState.data, [name]: value }
    }));

onSubmit = () => {
    const { data } = this.state;
    const errors = this.validate(data);
    this.setState({ errors });

    if (Object.keys(errors).length === 0) {
        this.setState({ loading: true });
        this.props
            .submit(data)
            .catch(err =>
                this.setState({ errors: err.response.data.errors, loading: false })
            );
    }
};

Заранее спасибо и извините за вопрос новичка.

Ответы [ 3 ]

0 голосов
/ 28 августа 2018

Что говорит вам eslint с ошибкой react/destructuring-assignments, так это следующие назначения: 

const data = this.state.data;

можно переписать в: 

const { data } = this.state;

Это также работает для аргументов функции, поэтому: 

onChange = e => { ... }

можно записать как 

onChange = ({target: {value, name}}) => { ... }

Следующая ошибка для react/no-access-state-in-setstate говорит вам, что вы пишете: 

this.setState({
    data: { ...this.state.data, [e.target.name]: e.target.value }
});

когда вы должны писать: 

this.setState(prevState => ({
    data: { ...prevState.data, [e.target.name]: e.target.value }
}));

или, если вы объедините это с правилом react/destructuring-assignments: 

onChange = ({target: {name, value}}) =>
    this.setState(prevState => ({
        data: { ...prevState.data, [name]: value }
    }));

Подробнее об этих двух правилах вы можете прочитать здесь:

реагировать / деструктурирующее присваивание

реакция / отсутствие доступа к состоянию в наборе

0 голосов
/ 28 августа 2018

Разрушение - это, в основном, синтетический сахар Некоторые конфигурации Eslint предпочитают его (что, я полагаю, ваш случай).

Это в основном объявляет значения и делает их равными битам синтаксиса, которые вы не хотите повторять, например, для заданных реакционных реквизитов: 

this.props.house, this.props.dog, this.props.car

Деструктурированный ---> 

 const { house, dog, car } = this.props;

Так что теперь вы можете просто использовать дом, или собаку, или что угодно. Он обычно используется с состояниями и реквизитом в реакции , вот еще документация об этом, надеюсь, это поможет. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

0 голосов
/ 28 августа 2018

Это проблема с вашим onChange методом. Попробуйте что-то вроде этого: 

onChange = e =>
    this.setState(prevState => ({
        data: { ...prevState.data, [e.target.name]: e.target.value }
    }));

И посмотрите на раздел «Обновления состояний могут быть асинхронными» из https://reactjs.org/docs/state-and-lifecycle.html

...