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

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

获取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>

  )
}

函数ProfileOne（）{
const[profiles，setProfiles]=useState（[]）
useffect（（）=>{
获取（“api/profiles/”）
。然后（res=>{
console.log（res）
设置配置文件（res.data）
})
.catch（错误=>{
console.log（错误）
})
}, [])
返回(
profiles.map（profile=>{
const{name}=profile；
})
{profile.name}
)
}

---

我希望能够在react组件中调用类似profile.major的东西，但我目前尝试的方法不起作用。请告诉我正确的方法。提前感谢您。

如果要在组件之间传递数据，您可能需要重新构造应用程序或实现状态管理库，如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>
               )
}

函数ParentComponent（）{
const[profiles，setProfiles]=useState（[]）
useffect（（）=>{
获取（“api/profiles/”）
。然后（res=>{
console.log（res）
设置配置文件（res.data）
})
.catch（错误=>{
console.log（错误）
})
}, [])
返回(
);
}

在子组件中：

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>
               )
}

function ProfileOne（道具）{
返回props.profiles.map（profile=>(
{profile.name}
)
}

什么是“它不工作”？你得到了什么？

profile.name

在映射之外，应该在循环内部吗？当我说它不工作时，react-dev-tools错误显示profile没有定义@Sowaminside-the-useffect？@ksankarThis-way，所以你的profile在循环中引用它定义的地方。

返回profiles.map（profile=>（{profile.name}）是的！正是我想要的！回答得很好。非常感谢你，乔希。