时间戳

首页 > 解决方案 > reactjs数据映射，从服务器获取数据

reactjs - reactjs数据映射，从服务器获取数据

问题描述

我是新的 reactjs 我正在尝试保存从服务器获取的数据，例如对象（数组），但我不能。

演示

在 render() 函数中，我应该怎么做才能保存数据，我不想显示，只是保存到用户（数组）或其他东西？我认为我应该使用“地图”，但我不知道该怎么做。接下来，我想像这样将用户保存到model.data中。帮我。

演示2

标签： reactjsdictionaryrenderdatabase-server

解决方案

由于您刚刚开始使用 react，因此请尝试使用React Hooks而不是类样式组件。这是推荐的方式。

如果您只想存储数据而不显示任何内容，则需要某种封装/共享状态。例如redux或context可以帮助你。由于上下文是内置的并且更易于使用，因此这里是一个示例：

首先创建一个上下文

用户上下文.js

import React from "react";

export const UsersContext= React.createContext();

现在创建一个自定义挂钩来存储您的状态。

使用Users.js

import React, {useState, useEffect} from "react";
export const useUsers = () => {
  const [users, setUsers] = useState([]);

  const getUsers = () =>{
    //your fetch
  }

  useEffect(()=>{ //equivalent to componentDidMount
    getUsers();
  }, [])

  return {users, setUsers}
}

然后提供上下文，以便应用程序中的每个组件都可以访问该上下文。

应用程序.jsx

import {UsersContext} from "./UsersContext";

const App = () => {

const contextValue = useUsers();

return (
    <div className={'App'}>
      <UsersContext.Provider value={contextValue}>
        <Main/>
      </UsersContext.Provider>
    </div>
   );
 };

 export default App;

如果您想在组件中使用状态，例如配置文件页面，请执行以下操作：

个人资料页面.jsx

import React, {useContext} from "react";
import {UsersContext} from "./UsersContext";

const ProfilePage = () => {
const {users} = useContext(UsersContext);

// now you can use it like
console.log(users)

return (...) 
}

推荐阅读