Как / Где вы делаете вызов API и передаете его в свой компонент?В React есть новый API-интерфейс ловушек, который позволяет вам использовать компоненты, основанные на функциях, для большинства вещей, но, похоже, вы новичок в реакции, и дихотомия между компонентами класса и функции может быть полезной для вас, когда вы начинаете.А пока подумайте об этом так:
- Функциональные компоненты: немой.просто берет данные и отображает их.
- Компоненты класса (или компоненты функций с перехватчиками): визуализируют данные, но также имеют свое собственное состояние и методы жизненного цикла
Так как яуверен, что вы понимаете, важно не только иметь способ получения данных и рендеринга данных, но также важно иметь способ управления состоянием.Например, вам нужно место, где вы можете хранить данные и обращаться к ним позже, или, возможно, указывать информацию о состоянии, такую как «загрузка» (t / f) или «ошибка» (t / f).
Еще одна полезная концепцияявляется компонентным составом.Мы будем использовать компонент более высокого порядка, который сейчас обрабатывает вызов API (есть более сложные решения с такими библиотеками, как redux / redux-sagas и т. Д.), И условно отображает таблицу или сообщение об ошибке.
class MyComponent extends react.Component {
constructor(props){
super(props);
this.state = {
loading: false,
error: false,
data: {}
}
}
//this is just a utility function so that you can use async / await with setState
setStateAsync(state) {
return new Promise((resolve) => {
this.setState(state, resolve)
});
}
//will run after your component is mounted to the dom
async componentDidMount() {
try{
await this.setStateAsync({...this.state, loading: true})
let data = await getCustomer();
await this.setStateAsync({...this.state, loading: false, data})
} catch(e) {
this.setState({error: true, loading: false, data: {}})
}
}
//stick what you would normally return in a function component here
render() {
return (
{this.state.loading ? (<div>"...loading"</div>) :
this.state.error ? (<div style={{color: 'red'}}>ERROR!</div> :
(<CustomerDetails customer={this.state.data} />)
)
}
}
Прочитайте это для получения дополнительной информации о компонентах класса.Приведенный выше пример довольно прост, но обратите внимание, что:
- Существует локальное состояние
- Компонент выполняет рендеринг на основе как реквизита, так и локального состояния
- Оператор return обертыванияJavaScript в {}.Это включает в себя несколько троичных, чтобы условно определить, что визуализировать.Вы можете заменить сценарии загрузки и ошибок более детализированными компонентами, которые вы можете определить где угодно, в зависимости от ваших стилистических потребностей.