Блог

Итак, в настоящее время у меня есть этот код с useEffect(), который каждый раз отображает данные из API. Я обновляю, но я пытаюсь отобразить эти данные только при нажатии на мою кнопку. Я не слишком уверен, куда идти с моим кодом.

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

      function App() {
        const [image, setImage] = useState(false);
   
      // I tried to put a onclick function, but not sure what to add here
        const handleChange = ()
      => {
      setImage(true)
      }
      

      // this code displays my data on refresh
      useEffect(() => {
        axios
          .get(
            'https://api.com'
          )
          .then(res => {
             setImage ?
            setImage(res.data.faces[0].urls[4][512]) : console.log('nothing')
          })
          .catch(err => {
            console.log(err.message);
          });
      }, []);

        return (
          <div className='App'>
            <h1>Photo Generator</h1>
            <img src={image} />
            <button onClick={handleChange}>Show new Image</button>
          </div>
        );
      }
  

Я обновил ваш код. Попробуйте этот код, дайте мне знать, если он работает для вас. 🙂

 import React, { useState } from "react";
import "./App.css";
import axios from "axios";

function App() {
  const [image, setImage] = useState(false);

  // I tried to put a onclick function, but not sure what to add here
  const handleChange = () => {
    axios
      .get("https://api.com")
      .then(res => {
        const uri = res.data.faces[0].urls[4][512];
        if (uri) {
          setImage(uri);
        } else {
          console.log("nothing");
        }
      })
      .catch(err => {
        console.log(err.message);
      });
  };

  return (
    <div className="App">
      <h1>Photo Generator</h1>
      {image amp;amp; <img src={image} alt="yourImage" />}
      <button type="button" onClick={handleChange}>
        Show new Image
      </button>
    </div>
  );
}
  

В этом случае вам не нужно использовать useEffect Hook.
также не нужно проверять setImage внутри функции обратного вызова API.

Вы могли бы сделать это следующим образом

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

function App() {
  const [image, setImage] = useState('');
  const [displayImage, setDisplayImage] = useState('none');

  const handleChange = () => {
    setDisplayImage('flex');
  };

  useEffect(() => {
    axios
      .get('https://api.com')
      .then((res) => {
        setImage
          ? setImage(res.data.faces[0].urls[4][512])
          : console.log('nothing');
      })
      .catch((err) => {
        console.log(err.message);
      });
  }, []);

  return (
    <div className="App">
      <h1>Photo Generator</h1>
      <div style={{display: displayImage}}>
        <img style src={image} />
      </div>

      <button onClick={() => handleChange()}>Show new Image</button>
    </div>
  );
}


  

Вы также могли бы сделать

 <button onClick={() => setDisplayImage('flex')}>Show new Image</button>