Как связать ввод в форму с методом в React?

Question

[AntonHPL]

Как выдавать информацию о постах (репозиториях) конкретного пользователя GitHub ${person}, имя которого мы вводим в поле в компоненте с формой (Info.js)?

Другими словами:
как увязать метод fetchPosts, чтобы он вызывался по нажатию на кнопку формы (onSubmit)? Например, в компоненте Info этот метод уже будет называться ReposMethod.

App.js:

import React, { useState, useEffect } from 'react';
import Posts from './components/Posts';
import Pagination from './components/Pagination';
import Info from './components/Info'
import axios from 'axios';
import './App.css';

const App = () => {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(false);
  const [currentPage, setCurrentPage] = useState(1);
  const [postsPerPage] = useState(10);

  useEffect(() => {
    const fetchPosts = async (event) => {
      setLoading(true);
      const res = await axios.get(`https://api.github.com/users/bibeva/repos`);
      setPosts(res.data);
      setLoading(false);
    };

    fetchPosts();
  }, []);

  // Get current posts
  const indexOfLastPost = currentPage * postsPerPage;
  const indexOfFirstPost = indexOfLastPost - postsPerPage;
  const currentPosts = posts.slice(indexOfFirstPost, indexOfLastPost);

  // Change page
  const paginate = pageNumber => setCurrentPage(pageNumber);

  return (
    <div className='container mt-5'>
      <h1 className='text-primary mb-3'>My Blog</h1>
      <Info />
      <Posts posts={currentPosts} loading={loading} />
      <Pagination
        postsPerPage={postsPerPage}
        totalPosts={posts.length}
        paginate={paginate}
      />
    </div>
  );
};

export default App;

Info.js:

import React from 'react';

class Info extends React.Component{
render() {
  return (
    <div>
    <form onSubmit={this.props.reposMethod}>
      <input type="text" name="person"/>
      <button>Получить сведения</button>
    </form>
    </div>
  )
}
}

export default Info;

Answer 1

[0xD34F]

Уберите эффект.

Функция получения списка репозиториев - пусть получает в качестве параметра имя пользователя:

async function fetchRepos(username) {
  let result = [];

  try {
    result = (await axios.get(`https://api.github.com/users/${username}/repos`)).data;
  } catch(e) {
    console.error(e);
  }

  setRepos(result);
}

Передавайте её в компонент с формой поиска:

<Search onSearch={fetchRepos} />

Внутри которого ей будет передаваться текущее значение из input'а:

function Search({ onSearch }) {
  const [ searchValue, setSearchValue ] = useState('');

  function onSubmit(e) {
    e.preventDefault();
    onSearch(searchValue);
  }

  return (
    <form onSubmit={onSubmit}>
      <input
        type="text"
        value={searchValue}
        onChange={e => setSearchValue(e.target.value)}
      />
      <button>Найти</button>
    </form>
  )
}

https://jsfiddle.net/2foy6rbw/

Comments

[AntonHPL]

Да, метод работает, но у меня там еще пагинация была))
Вот как ее теперь туда вставить со всеми кнопками?) 1 2 3 4 и так далее
Гитхаб предоставляет готовый URL, но я как начинающий пока слабо понимаю куда что вставить:
`https://api.github.com/${username}/repos?page=2&pe...`

[0xD34F]

AntonHPL, ваш вопрос был не про пагинацию. Думайте сами или оформляйте новый вопрос.