Блог

Главная - Вопросы по программированию - Вызов функции React не работает при отображении в JSX

Вызов функции React не работает при отображении в JSX

#javascript #reactjs

Вопрос:

Я создал функцию, которая находит данные JSON в React, и она работает (я проверил с помощью console.log), но когда я сопоставляю в div с помощью JSX ({myFunction.map ()}), она вообще не показывает никаких выходных данных. Я пробовал использовать консоль.войдите в этот раздел, он тоже не работает.

Состояния:

   const [coins, setCoins] = useState([]);
  const [search, setSearch] = useState("");

Вот запрос на получение:

   useEffect(() => {
    axios.get(
      "secret-url"
    ).then((res) => {
      setCoins(res.data);
      console.log(res.data);  **//This cosole.log working, showing all json data**
    }).catch((error) => {
      console.log(error);
    });
  }, []);

Вот функция:

   const filteredCoins = coins.filter((coin) => {
    coin.name.toLowerCase().includes(search.toLowerCase());
    console.log('ABCD'); **// This is working, meaning function is working**
  });

Сопоставление JSX (Эта часть не работает:

 <div className="crypto-app">
  {filteredCoins.map(coin => { 
    console.log('ABCD'); **//Not Working**
    return <Coin key={coin.id} name={coin.name} price={coin.current_price} image={coin.image} volume= 
    {coin.volume} symbol={coin.market_cap} /> })}
</div>

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

1. Я напортачил во время публикации вопроса. Но в консоли кода тоже не работает, и ни один компонент <Coin/> не отображается.

2. Вы доказали, что в filteredCoins списке действительно что-то есть перед картой? Есть ли ошибки в консоли, которые могут быть информативными?

Ответ №1:

filter создает новый массив, содержащий все значения из исходного массива, для которого возвращает функция true .

У вашей функции нет return оператора, поэтому она всегда возвращает undefined , поэтому filteredCoins она пуста.

Затем вы map перекрываете пустой массив, чтобы функция сопоставления никогда не вызывалась (если бы это было так, это привело бы к ошибке, потому что вы неправильно console написали ).

Ответ №2:

Попробуйте этот код.

 <div className="crypto-app">
   {coins
    .filter((coin) => {`enter code here`
     if (search === "") {
       return coin;
     } else if (
        Object.values(coin)
        .toString()
        .includes(search.toLowerCase())
        ) {
         return coin;
       }
     })
      .map(coin => { 
      console.log('ABCD'); **//Not Working**
      return <Coin key={coin.id} name={coin.name} price={coin.current_price} image= 
      {coin.image} volume= {coin.volume} symbol={coin.market_cap} /> 
     }) 
</div>
Метки: