时间戳

首页 > 解决方案 > 如何调用作为变量存储在不同组件中的 JSON 数据？

javascript - 如何调用作为变量存储在不同组件中的 JSON 数据？

问题描述

我目前正在使用 axios 从我的 api 中绘制 JSON 数据，并且我正在映射这些数据并将其存储为变量。我希望能够在我的反应组件中调用这些变量，但我似乎无法找出最好的方法。

获取 JSON 数据并存储为变量

function ProfileOne(){
  const [profiles, setProfiles] = useState([])

  useEffect(() => {
      axios.get("api/profiles/")
          .then(res =>{
              console.log(res)
              setProfiles(res.data)
          })
          .catch(err => {
              console.log(err)
          })
  }, [])
  return (
                  profiles.map(profile => {
                    const { name } = profile;
                    })
            <div>
                <h2><b>{profile.name}</b></h2>
            </div>

  )
}

而且我希望能够在反应组件中调用 profile.major 之类的东西，但是我目前尝试这样做的方式不起作用。请让我知道执行此操作的正确方法。先感谢您。

标签： javascriptjsonreactjsvariablesaxios

解决方案

如果您要在组件之间传递数据，您可能必须重新构建应用程序或实现状态管理库，例如 redux。就个人而言，我会将您的 API 调用移动到父组件，然后将数据作为道具传递给子组件。父组件如下所示：

function ParentComponent() {

const [profiles, setProfiles] = useState([])

useEffect(() => {
  axios.get("api/profiles/")
      .then(res =>{
          console.log(res)
          setProfiles(res.data)
      })
      .catch(err => {
          console.log(err)
      })
   }, [])

return (
    <>
      <ProfileOne profiles={profiles} />
      <OtherComponent profiles={profiles} />
    </>
    );
}

在子组件中：

function ProfileOne(props){

    return props.profiles.map(profile => (
                   <div>
                       <h2><b>{profile.name}</b></h2>
                   </div>
               )
}

推荐阅读