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

Question

我目前正在使用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>

  )
}

我希望能够在react组件中调用类似Profile.Major的东西，但我目前尝试的方法并不奏效。请让我知道这样做的正确方法。提前谢谢你。

Answer 1

如果要将数据从一个组件传递到另一个组件，则可能需要重新构造应用程序或实现一个状态管理库，如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>
               )
}