JavaScript — как правильно сделать вызов API в реагировать JS?

Как правильно сделать вызов API в реагировать JS?

Это обсуждение было долгим, и ответ @Alexander T. послужил хорошим руководством для того, чтобы следовать тому, кто новичок, чтобы реагировать, как я. И я поделюсь некоторыми дополнительными ноу-хау о вызове одного и того же API несколько раз для обновления компонента, я думаю, что это, вероятно, распространенная проблема, с которой новичок может столкнуться в начале.

componentWillReceiveProps(nextProps) , из официальной документации :

Если вам нужно обновить состояние в ответ на изменения реквизита (например, чтобы сбросить его), вы можете сравнить this.props и nextProps и выполнить переходы состояния, используя this.setState () в этом методе.

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

Основываясь на примере @Alexander T.:

 export default class UserList extends React.Component { constructor(props) { super(props); this.state = {person: []}; } componentDidMount() { //For our first load. this.UserList(this.props.group); //maybe something like "groupOne" } componentWillReceiveProps(nextProps) { // Assuming parameter comes from url. // let group = window.location.toString().split("/")[*indexParameterLocated*]; // this.UserList(group); // Assuming parameter comes from props that from parent component. let group = nextProps.group; // Maybe something like "groupTwo" this.UserList(group); } UserList(group) { $.getJSON('https://randomuser.me/api/'   group) .then(({ results }) ={amp}gt; this.setState({ person: results })); } render() { return (...) } } 

componentWillReceiveProps() будет устаревшим.

Вот только некоторые методы (все они в Doc ) в жизненном цикле, которые, я думаю, будут связаны с развертыванием API в общем случае: введите описание изображения здесь

Ссылаясь на диаграмму выше:

  • Развертывание API в componentDidMount()

    Правильный сценарий для вызова API здесь состоит в том, что содержимое (из ответа API) этого компонента будет статическим, componentDidMount() срабатывать только один раз, пока компонент монтируется, даже новые реквизиты будут передаваться из родительского компонента или иметь действия, чтобы вести re-rendering
    Компонент проверяет разницу для повторного рендеринга, но не повторного монтирования .
    Цитата из документа :

Если вам нужно загрузить данные из удаленной конечной точки, это хорошее место для создания сетевого запроса.


  • Развертывание API в static getDerivedStateFromProps(nextProps, prevState)

Мы должны заметить, что существует два вида обновления компонента , setState() в текущем компоненте не приведет к setState() этого метода, а к повторному рендерингу или новым подпоркам из родительского компонента . Мы могли бы узнать, что этот метод также срабатывает во время монтажа.

Это подходящее место для развертывания API, если мы хотим использовать текущий компонент как шаблон, а новые параметры для API — это реквизиты, исходящие от родительского компонента .
Мы получаем другой ответ от API и возвращаем новое state здесь, чтобы изменить содержимое этого компонента.

Например:
У нас есть раскрывающийся список для разных автомобилей в родительском компоненте, этот компонент должен отображать детали выбранного.


  • Развертывание API в componentDidUpdate(prevProps, prevState)

В static getDerivedStateFromProps() от static getDerivedStateFromProps() , этот метод вызывается сразу после каждого рендеринга, кроме начального рендеринга. Мы могли бы иметь вызов API и визуализировать разницу в одном компоненте.

Расширьте предыдущий пример:
Компонент для отображения сведений об автомобиле может содержать список серий этого автомобиля. Если мы хотим проверить серийный выпуск 2013 года, мы можем щелкнуть или выбрать или … элемент списка, чтобы привести первый setState() для отражения этого поведения ( например, выделение элемента списка) в этом компоненте, а в следующем componentDidUpdate() мы отправляем наш запрос с новыми параметрами (состояние). Получив ответ, мы setState() для рендеринга различного содержимого деталей автомобиля. Чтобы не допустить, чтобы следующая componentDidUpdate() вызывала бесконечный цикл, нам нужно сравнить состояние, используя prevState в начале этого метода, чтобы решить, отправим ли мы API и отобразим новый контент.

Этот метод действительно может использоваться как static getDerivedStateFromProps() с реквизитами, но для обработки изменений props использовать prevProps . И нам нужно сотрудничать с componentDidMount() для обработки начального вызова API.

Цитата из документа :

… Это также хорошее место для выполнения сетевых запросов, если вы сравниваете текущий реквизит с предыдущим реквизитом …

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector