javascript - 使用 react 使用全局捐赠 API 获取慈善机构

Question

我正在使用全球捐赠 API 来制作慈善查找器应用程序。

我在CharityFinderPage.js组件中有两个下拉菜单和一个搜索按钮。现在单击搜索按钮，我想使用themeId. 端点是https://api.globalgiving.org/api/public/projectservice/themes/{themeId}/projects

我知道handleClick我应该获取慈善机构，但我如何获得组件themeId中handleClick的价值CharityFinderPage.js。

我想要的是在单击按钮时显示一个新的卡片组件，例如显示一张慈善卡片，其中填充了 API 数据中的字段，但首先我需要能够从 API 获取数据，然后我可以渲染一个新组件。

这是代码：

CharityFinderPage.js

const CharityFinderPage = () => {

  const handleClick = () => {
    console.log("inside handleclick")
  }

  return (
    <div style={containerStyle}>
      <h1>Charity Finder ❤️</h1>
      <h3>Search for charity</h3>
      <h4>
        Filter charities by personal search conditions. Use the dropdown below
        to see charities matching your criteria.
      </h4>

      <Themes />
      <Regions />
      <button onClick={handleClick}>Search</button>
    </div>
  )
}

export default CharityFinderPage

主题.js

import React, { useEffect, useState } from "react"
import axios from "axios"
const url = `https://api.globalgiving.org/api/public/projectservice/themes.json?api_key=${process.env.REACT_APP_api_key}`

const Themes = () => {
  const [isLoading, setIsLoading] = useState(false)
  const [selectValue, setSelectValue] = useState("")
  const [themes, setThemes] = useState([])

  useEffect(() => {
    const fetchThemes = async () => {
      try {
        setIsLoading(true)
        const result = await axios.get(url)
        setThemes(result.data.themes.theme)
        setIsLoading(false)
      } catch (err) {
        console.log(err)
      }
    }
    fetchThemes()
  }, [])

  const handleChange = (event) => {
    console.log("inside handleChange", event.target.value)
    setSelectValue(event.target.value)
  }

  return (
    <div>
      {isLoading ? (
        <h4>Loading......</h4>
      ) : (
        <div>
          <label>Select theme: </label>
          <select onChange={handleChange} value={selectValue}>
            {themes.map((theme, id) => {
              return <option key={id}>{theme.name}</option> //{id} is the `themeId`
            })}
          </select>
        </div>
      )}
    </div>
  )
}

export default Themes

Regions组件与Themes.

标签： javascriptreactjsapireact-hooksreact-props

Answer 1

你可以这样做。

const CharityFinderPage = () => {
  const [themeId, setThemeId] = useState();
  const handleClick = () => {
    console.log("inside handleclick")
    // make call to endpoint with themeId
  }

  return (
    <div style={containerStyle}>
      <h1>Charity Finder ❤️</h1>
      <h3>Search for charity</h3>
      <h4>
        Filter charities by personal search conditions. Use the dropdown below
        to see charities matching your criteria.
      </h4>

      <Themes setThemeId={setThemeId} />
      <Regions />
      <button onClick={handleClick}>Search</button>
    </div>
  )
}

export default CharityFinderPage

然后在 Themes.js 中：

...

const handleChange = (event) => {
  console.log("inside handleChange", event.target.value)
  props.setThemeId(event.target.value);
  setSelectValue(event.target.value)
}

...