Чтобы передать данные между компонентами в React, можно использовать пропсы и состояния (props и state).
1. Для передачи данных от родительского компонента к дочернему компоненту можно использовать пропсы. Родительский компонент передает данные дочернему через атрибуты, которые могут быть доступны в дочернем компоненте как this.props.
2. Для передачи данных от дочернего компонента к родительскому можно использовать callback функции. Родительский компонент передает функцию дочернему компоненту через пропсы, и дочерний компонент вызывает эту функцию с данными в качестве аргумента.
Чтобы улучшить код компонента App и избежать повторяющегося блока кода setIsLoading в каждой функции для получения данных в useEffect, можно вынести этот блок кода в отдельную функцию.
Пример:
```jsx
function App() {
const [isLoading, setIsLoading] = useState(false);
const fetchWithLoading = async (fetchFunction) => {
setIsLoading(true);
await fetchFunction();
setIsLoading(false);
}
const fetchBooks = () => {
// fetch books data
}
const fetchAuthors = () => {
// fetch authors data
}
const fetchReviews = () => {
// fetch reviews data
}
useEffect(() => {
fetchWithLoading(fetchBooks);
}, []);
useEffect(() => {
fetchWithLoading(fetchAuthors);
}, []);
useEffect(() => {
fetchWithLoading(fetchReviews);
}, []);
return (
<div>
{isLoading ? <p>Loading...</p> : (
<>
{/* Render your components here */}
</>
)}
</div>
);
}
export default App;
```
В этом примере, функция fetchWithLoading принимает другую функцию в качестве аргумента и вызывает setIsLoading(true) перед выполнением этой функции, а затем вызывает setIsLoading(false) после выполнения. Таким образом, можно избежать повторения кода setIsLoading в каждой функции для получения данных.