Как вызвать 2 апи в одном классе, чтобы оба работали? (Реагировать)

Я хочу вызвать API дважды в одном классе, но когда я вызываю другой, первый больше не работает. Что я должен делать?

Это код ---> P.S Это просто код запроса. Я не пишу код рендеринга

export class  Ajax1 extends Component{
    constructor(props){
        super(props)
        this.state = {
            info:[],
            info2:[]
        }
    }

    async componentDidMount(){
        const url = "https://jsonplaceholder.typicode.com/users"
        const res=await fetch(url)
        const data= await res.json()
        this.setState({info:data})
    }

    async componentDidMount(){
        const url = "https://jsonplaceholder.typicode.com/posts"
        const res=await fetch(url)
        const data= await res.json()
        this.setState({info2:data})
    }

reactjs ajax api rxjs frontend

14.12.2020 14:37

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

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

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

У вас не должно быть более одной функции componentDidMount в одном классе:

async componentDidMount(){
    this.fetchInfo();
    this.fetchInfo2()
}

async fetchInfo(){
    const url = "https://jsonplaceholder.typicode.com/users"
    const res=await fetch(url)
    const data= await res.json()
    this.setState({info:data})
}

async fetchInfo2(){
    const url = "https://jsonplaceholder.typicode.com/posts"
    const res=await fetch(url)
    const data= await res.json()
    this.setState({info2:data})
}

В дополнение к этому, если вы хотите обновить состояние только один раз, когда оба вызова API завершены, вы можете использовать Promise.whenAll() в функции componentDidMount, чтобы установить состояние только после завершения обоих обещаний.

— 14.12.2020 14:47

Да, вы правы, я обновлю свой ответ, спасибо

— 14.12.2020 14:48

Также я рекомендую вам использовать Promise.all.

— 14.12.2020 14:55

О да, извините, я перепутал имя с Task.WhenAll С#.

— 14.12.2020 14:56

14.12.2020 14:45