Блог

Я создаю приложение, ориентированное на отображение репозиториев и информации github пользователя. В компоненте «Раздел» я извлекаю эти хранилища и отображаю их на экране. В другом компоненте «Меню» я хотел, чтобы он посчитал эти репозитории и отобразил их. Должен ли я использовать реквизит в этом случае?

Раздел Компонент

 import React, { useState } from 'react'
import axios from 'axios'
import { Square, Wrapper, Input, Button } from './Section.styled'

export default function Section() {

  const [username, setUsername] = useState("");
  const [loading, setLoading] = useState(false);
  const [repos, setRepos] = useState([]);

  const searchRepos = () => {
    setLoading(true);
    axios({
      method: "get",
      url: `https://api.github.com/users/${username}/repos`,
    }).then(res => {
      setLoading(false);
      setRepos(res.data);
      
    })
  }
  
  const handleSubmit = (e) => {
    e.preventDefault();
    searchRepos()
  }

  const renderRepo = (repo)=>{
    return(
      <Square>
        {repo.name}
     </Square>
    )
  }

  return (
    <>
      <Wrapper>
        <Input
          placeholder="Usuário"
          value={username}
          onChange={e => { setUsername(e.target.value) }}
        />
        <Button
          onClick={handleSubmit}
          type="submit">
          {loading ? "Buscando..." : "Buscar"}
        </Button>

        
          {repos.map(renderRepo)}
        
      </Wrapper>
    </>
  )
}

 

Компонент меню

 import React from "react";
import { bool } from "prop-types";
import { StyledMenu } from "./Menu.styled";


const Menu = ({ open, ...props }) => {
  const isHidden = open ? true : false;
  const tabIndex = isHidden ? 0 : -1;

  return (
    <>
      <StyledMenu open={open} aria-hidden={!isHidden} {...props}>
        <a href="/" tabIndex={tabIndex}>
          Repositories: 
        </a>
        <a href="/" tabIndex={tabIndex}>
          Followeres:
        </a>
        <a href="/" tabIndex={tabIndex}>
          Following:
        </a>
      </StyledMenu>
    </>
  );
};

Menu.propTypes = {
  open: bool.isRequired,
};

export default Menu;

 

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

1. Передайте функцию searchRepos в качестве реквизита от parent компонента обоих section и menu компонента к section компоненту, вызовите функцию section , это введет данные parent и отправит данные в menu компонент в качестве реквизитов , т. е. называется поднятием состояния.
2. Если компоненты находятся далеко (глубоко вложены или имеют несвязанного родителя, ветвь), вы можете просто использовать контекстное хранилище

3. Последний способ-сохранить данные вызываемого API компонента section в локальном хранилище браузера и использовать их в menu компоненте. (НЕ РЕКОМЕНДУЕТСЯ)