代码之家  ›  专栏  ›  技术社区  ›  p7adams

仅获取一次数据以响应应用程序。重新加载页面后不再提取

  •  1
  • p7adams  · 技术社区  · 8 年前

    我想知道是否可以只向一个正在运行的React应用程序获取一次数据。 我想要达到的目标是: 我有一个应用程序,在那里我从JSONPlaceholder API获取用户数据,然后将这些数据传递给这个组件的状态,并分配给一个usersarray变量。

    在应用程序运行期间,会执行一些操作,如从此用户中删除数据。

    发生了什么事:

    页面重新加载后,主组件将再次装载,并再次获取数据。

    期望:

    我只想永远取一次这个数据。有没有可能以某种方式实现这件事,或者我做错了什么?

    4 回复  |  直到 8 年前
        1
  •  2
  •   Tholle    8 年前

    localStorage

    class App extends React.Component {
      state = { users: [] };
    
      componentDidMount() {
        let users = localStorage.getItem("users");
    
        if (users) {
          users = JSON.parse(users);
          this.setState({ users });
        } else {
          fetch("https://jsonplaceholder.typicode.com/users")
            .then(res => res.json())
            .then(users => {
              this.setState({ users });
              localStorage.setItem("users", JSON.stringify(users));
            });
        }
      }
    
      handleClick = index => {
        this.setState(
          prevState => {
            const users = [...prevState.users];
            users.splice(index, 1);
            return { users };
          },
          () => {
            localStorage.setItem("users", JSON.stringify(this.state.users));
          }
        );
      };
    
      render() {
        return (
          <div>
            {this.state.users.map((user, index) => (
              <div key={user.id}>
                <span>{user.name}</span>
                <button onClick={() => this.handleClick(index)}>Remove</button>
              </div>
            ))}
          </div>
        );
      }
    }
    
        2
  •  1
  •   Mohammed Ilyass NASR    8 年前

    window.sessionStorage

    sessionStorage = sessionStorage || window.sessionStorage
    
    // Save data to sessionStorage
    sessionStorage.setItem('key', 'value');
    
    // Get saved data from sessionStorage
    var data = sessionStorage.getItem('key');
    
    // Remove saved data from sessionStorage
    sessionStorage.removeItem('key');
    
    // Remove all saved data from sessionStorage
    sessionStorage.clear();
    

    window.localStorage

        3
  •  1
  •   AConsumer    8 年前

        4
  •  0
  •   xadm    8 年前