Распространенные ошибки React

Мы все были в такой ситуации, когда мы написали какой-то код, а ошибка — это следующая «логичная» вещь. Это может быть неприятно, когда мы сталкиваемся с этими сценариями, и может быть еще более болезненным, если у нас нет правильной настройки React для отладки.

Для устранения этих проблем необходимо понять проблему, отследить проблемную линию и исправить ее. Иногда это не так просто, так как ошибка может указывать на строку в одном файле, в то время как фактическая ошибка была в каком-то другом файле. В другой раз эти ошибки являются загадочными, что еще больше затрудняет их отслеживание.

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

С этим из пути, давайте найдем эти ошибки.

Вы сделали компонент без состояния / функциональный и не вернулись.

import React from "react";

const Error = () => {
  <div>Error</div>;
};

export default Error;

Вы получаете следующую ошибку:

Сообщение об ошибке довольно интуитивно понятно, на изображении выше вы можете видеть, что ошибка началась со строки 19, которая на самом деле не является причиной ошибки, а точкой, в которой ошибка была обнаружена. Исправить это так же просто, как добавить return в указанный функциональный компонент.

const Error = () => {
  return <div>Error</div>;
};

// OR

const Error = () => <div>Error</div>;

Вызов метода обработчика событий, когда требуется ссылка на метод.

export default class Error extends React.Component {
  state = {
    text: ""
  };

handleChange = ({ target: { value } }) => {
    this.setState({ text: value });
  };

render() {
    return (
      <>
        <input
          onChange={this.handleChange()} {/* Error: method invocation */}
        />
      </>
    );
  }
}

Вы получаете сообщение об ошибке:

Это можно исправить двумя способами:

Передача ссылки вместо вызова метода следующим образом: onChange={this.handleChange}
Используйте функцию толстой стрелки: onChange={event => this.handleChange(event)}

Импорт компонента, который не был экспортирован, и его использование в render() . Это также может произойти в результате смешивания импорта по умолчанию и именованного импорта.

Исправить это так же просто, как экспортировать компонент, а в случае перепутанного импорта убедитесь, что вы импортируете компонент правильно.

У вас есть компонент, подключенный к редуксу, и вы вызываете действие/функцию из реквизитов компонента, которые вы еще не передали. mapDispatchToProps() .
В React 16.8.0 были добавлены хуки. Когда вы вызываете установщик хука непосредственно в обработчике событий, как показано ниже:

const Hooks = props => {
  const [value, setValue] = useState("Awesome");

return (
    <div>
      Hooks are here and they are great!! No I meant{" "}
      <strong>
        <em>{value}</em>!
      </strong>
      <br />
      <hr />
      <button onClick={setValue("Fantastic")}>Change Text</button>
    </div>
  );
};

Возникает следующая ошибка:

Это можно исправить, изменив onClick={setValue(“Fantastic”)} к onClick={() => setValue(“Fantastic”)} .

Иногда ошибка может быть сложной. Возьмем, к примеру, ошибку ниже:

Существуют различные причины такого рода ошибок, некоторые из которых уже перечислены выше. Помимо уже упомянутых причин, это может быть результатом обновления версии React, скажем, перехода с v15 на v16, а не обновления устаревших методов жизненного цикла.

Еще ошибка такая:

Warning: Functions are not valid as a React child.
This may happen if you return a Component instead of <Component /> from render.
Or maybe you meant to call this function rather than return it.

Сценарий этой ошибки таков:

<select name="category">
    value={category} 
    onChange={this.handleChange}/>
    <option>Select a category</option>
    ...
</select>

Из кода вы быстро заметите, что select элемент был закрыт сразу после name атрибут, оставляющий другие атрибуты (value а также onChange) висит плюс есть еще один самозакрывающийся тег после onChange атрибут. Их удаление устраняет ошибку.

Другая ошибка может быть следующей:

Этот код породил эту ошибку:

return(
   <ul onClick="this.handleToggle()">
     ...
   </ul>
);

Причина ошибки довольно проста, onClick ожидает функцию, но вместо этого получает строковый тип. Быстрое решение этой проблемы — удалить окружающие кавычки и заменить их на {} как это: <ul onClick={this.handleToggle()}>

Взгляните на следующий код:

function App() {
  function handleRefresh() {
    window.location.reload();
  }
return (
    <div>
      <h1>Headlines</h1>
      <button onClick={handleRefresh()}>Reload</button>
    </div>
  );
}

На первый взгляд вы можете подумать, что в приведенном выше коде нет ничего плохого, но запустив его, вы окажетесь в состоянии бесконечного повторного рендеринга. Почему?
Ну, ваш обработчик событий кнопки вызывает handleRefresh() метод, который напрямую вызывает window.location.reload() . Если вам действительно необходимо это сделать, то небольшая модификация вашего onClick обработчик делает свое дело. onClick={() => handleRefresh()} исправляет это.

Вывод

Ошибки сейчас являются частью нашей разработки, и мы видим их даже в работающем коде. То, что мы делаем, когда их находят, имеет значение. У меня такое ощущение, что вы в какой-то момент видели эти ошибки или все еще имеют их в данный момент времени. Я надеюсь, что это поможет вам исправить их.

Не стесняйтесь предлагать дополнение к этому.

Мне нравится значок красного сердца, нажмите, чтобы понравиться, это весело. Пожалуйста, поделитесь и передайте друзьям, коллегам, работникам и т. д. Пусть любовь продолжается.