Проблема с Axe ios и onClick - React JS - PullRequest
Новая
       54

Проблема с Axe ios и onClick - React JS

0 голосов
/ 06 августа 2020

Я вызываю файл JSON с помощью Ax ios и не понимаю, почему функция podcastClick автоматически выполняется (и не работает, если я щелкаю) и выполняется дважды? 

import React, { useState, useEffect } from 'react';
import axios from 'axios';
 

function App() {
  const [podcasts, setPodcasts] = useState([]);
  
  useEffect(() => {
    const fetchData = async () => {
      let urlApi = '';
      if (process.env.NODE_ENV === 'development') {
        urlApi = 'http://localhost:3000';
      } else {
        urlApi = 'TODO';
      }
      const response = await axios.get(`${urlApi}/podcasts/podcasts.json`);
        setPodcasts(response.data);
    }
    
    fetchData();
  }, []);

  function podcastClick(data) {
    console.log('Le lien a été cliqué : ' + data);
  }
  
  return (
  <ul>
    {podcasts.map((repo,key) =>
      <li key={key} onClick={podcastClick(repo.title)}>{repo.title}</li>
    )}
  </ul>
  );
}
 
export default App;

1 Ответ

2 голосов
/ 06 августа 2020

При присвоении eventhandler onClick вы вызываете функцию вместо передачи ссылки, поэтому каждый раз при визуализации компонента функция будет вызываться автоматически.

Вы можете использовать стрелочную функцию для передачи в пользовательской переменной для вызываемой функции и используйте ее, как показано ниже 

<li key={key} onClick={() => podcastClick(repo.title)}>{repo.title}</li>
...