使用回调按钮 Reactjs 调用的异步 Fetch 重新渲染渲染组件

Question

我是反应新手，我正在创建一个旨在执行计算以制定加密货币策略的应用程序，问题是，我已经编程了 API 但我需要通过回调更新数据呈现从异步 API fetch 获取的数据，就像 Binance 页面https://www.binance.com/es-LA/convert一样，它向您显示价格，当您按下更新按钮时，它会呈现更新的数据

我仍然无法与钩子相处，我什至想使用 Jquery 来使用 function，在这种情况下，它将与 ajax 一起使用，但我想在不包含更多库的情况下做出反应

我的 json 就是这样

{
      "response": "1",
      "remesaspatria": {
        "LTCUSD": "60.990000000000002",
        "LTCEUR": "60.178832999999997"
      },
      "Binance_LTCUSD": {
        "mins": 5,
        "price": "61.03271805"
      },
      "patriaexchange": {
        "BSPTR": "421,99",
        "PTRBTC": "415,46134749",
        "PTRLTC": "1,13874534",
        "USDPTR": "53,73",
        "USDBTC": "22.324,64",
        "USDLTC": "61,19",
        "BSUSD": "7,98"
      },
      "monitorweb": {
        "BCV": "7,984",
        "ENPARALELOV": "8,10",
        "DOLARTODAY": "8,16",
        "MONITORWEB": "8,17"
      }
    }

我的 app.js 文件

import React, { useState, useEffect } from 'react'
import { useFetch } from './fetchData'

const PillContents = (n) => {
  const data ='https://api.mysite.site/?site=crypto&apikey=mykey' // API URL
  const { loading, apiData } = useFetch(data)
  //const [apiV, apiVUP] = useState('')

  const [valuesC, setValuesC] = useState({ refB: 'hidden' })

  const handleCalc = () => {
    setValuesC({ ...valuesC, refB: '' })
  }
  const handleRef = () => {
    ... here is going to be a update vars function  ...
  }
  return (
    <MDBRow>
      <MDBCol md='6' className='mb-4'>
        <form>
          <MDBRow className='mb-4'>
              <MDBBtn className='mb-4' type='button' id='calc' onClick={handleCalc}>
                CALCULAR
              </MDBBtn>
              <MDBTooltip tag='span' wrapperClass='d-inline-block' placement='top' title='Actualizar precios'>
                <MDBBtn className={`mb-4 ${valuesC.refB}`} type='button' style={{ marginLeft: 5 }} id='refc'
                  onClick={handleRef}>
                  ACTUALIZAR
              </MDBBtn>
            </MDBTooltip>
          </MDBRow>
        </form>
      </MDBCol>
    </MDBRow>
  )
}

fetchdata.js 文件

import { useState, useEffect } from 'react'

export const useFetch = (url) => {
  const [apiData, setApiData] = useState([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    // Async request
    const getData = async () => {
      const response = await fetch(url)
      const apiData = await response.json()
      setApiData(apiData)
      setLoading(false)
    }
    getData()
  }, [url])
  return { loading, apiData }
}

Answer 1

您可以使用mutate function 并将其返回到您的自定义挂钩中（就像 SWR 库一样）。

app.js

import React, { useState, useEffect } from 'react'
import { useFetch } from './fetchData'

const PillContents = (n) => {
  const data ='https://api.mysite.site/?site=crypto&apikey=mykey' // API URL
  const { loading, apiData, mutate } = useFetch(data)
  //const [apiV, apiVUP] = useState('')

  const [valuesC, setValuesC] = useState({ refB: 'hidden' })

  const handleCalc = () => {
    setValuesC({ ...valuesC, refB: '' })
  }
  const handleRef = () => {
    mutate();
  }
  return (
    <MDBRow>
      <MDBCol md='6' className='mb-4'>
        <form>
          <MDBRow className='mb-4'>
              <MDBBtn className='mb-4' type='button' id='calc' onClick={handleCalc}>
                CALCULAR
              </MDBBtn>
              <MDBTooltip tag='span' wrapperClass='d-inline-block' placement='top' title='Actualizar precios'>
                <MDBBtn className={`mb-4 ${valuesC.refB}`} type='button' style={{ marginLeft: 5 }} id='refc'
                  onClick={handleRef}>
                  ACTUALIZAR
              </MDBBtn>
            </MDBTooltip>
          </MDBRow>
        </form>
      </MDBCol>
    </MDBRow>
  )
}

fetchdata.js

import { useState, useEffect } from 'react'

export const useFetch = (url) => {
  const [apiData, setApiData] = useState([])
  const [loading, setLoading] = useState(false)

  const mutate = async () => {
    setLoading(true)
    const response = await fetch(url)
    const apiData = await response.json()
    setApiData(apiData)
    setLoading(false)
  }

  useEffect(() => {
    mutate();
  }, [url])

  return { loading, apiData, mutate }
}

我刚刚重命名了您的getData function 并将其移至 useFetch scope。

注意：您还可以利用useCallback挂钩来防止无用的重新渲染。