Неперехваченная ошибка типа: repos.map не является функцией

#reactjs

Вопрос:

Я относительно новичок в использовании react и javascript и пытаюсь использовать api для извлечения с помощью пользовательского ввода из этого репозитория https://api.github.com/search/repositories?q=реагировать

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

 <script type="text/babel">
    
    function GithubList() {

      const [repos, setRepos] = React.useState([]);
      const [name, setName] = React.useState('');

     const fetchRepo = () => {
        fetch(`https://api.github.com/search/repositories?q=${name}`)
        .then(response => response.json())
        .then(data => {
          setRepos(data.items)
        })
        .catch(err => console.error(err))
      };


      const inputChanged = (event) => {
        setRepos(event.target.value);
      };

      const repoDetails = repos.map((repo,index) => (
      <tr key={index}>
        <td>{repo.full_name}</td>
        <td>{repo.url}</td>

        </tr>
      
      ));

      return(
        <div>
            <h2>Repositories</h2>
          <input type="text" value={name} onChange={inputChanged} />
          <button onClick={fetchRepo}> Search </button>
          <table>
            <tbody>
              <tr>
                  <th>Name</th>
                  <th>URL</th>
              </tr>
              {repoDetails}
              </tbody>
            </table>



          </div>


      );

    }
    ReactDOM.render(<GithubList/>, document.getElementById("root"))
    
    </script>
 

Ответ №1:

Это должно быть setName вместо setRepos того, чтобы в inputChanged

 const inputChanged = (event) => {
  setName(event.target.value);
};
 

Комментарии:

1. Спасибо, теперь я чувствую себя глупо, не замечая этого, ха-ха