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

我想知道是否有可能只向正在运行的React应用程序获取一次数据。 我想实现的目标是： 我有一个从JSONPLACEHOLDER API获取用户数据的应用程序，然后将该数据传递到该组件的状态，并分配给usersArray变量

在应用程序运行期间，会执行一些操作，如从该用户删除数据

发生了什么：

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

期望值：

---

我只想一次永远地获取这些数据。是否有可能在React中实现这一点，或者我做错了什么？

如果希望每个会话检索一次数据，可以使用会话存储；如果希望更好地控制数据的“过期”，可以使用本地存储。在获取的回调中设置一个任意值，每次加载应用程序时，在下次获取之前都要检查该值。API使用简单：

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();

相同的语法用于

您可以将数据放入，并在执行请求之前始终检查其中是否有数据

示例

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

类应用程序扩展了React.Component{
状态={用户：[]}；
componentDidMount（）{
让users=localStorage.getItem（“users”）；
如果（用户）{
users=JSON.parse（users）；
this.setState（{users}）；
}否则{
取回（“https://jsonplaceholder.typicode.com/users")
.then（res=>res.json（））
。然后（用户=>{
this.setState（{users}）；
setItem（“用户”，JSON.stringify（用户））；
});
}
}
handleClick=索引=>{
这是我的国家(
prevState=>{
const users=[…prevState.users]；
用户.拼接（索引，1）；
返回{users}；
},
() => {
setItem（“users”，JSON.stringify（this.state.users））；
}
);
};
render（）{
返回(
{this.state.users.map（（用户，索引）=>(
{user.name}
this.handleClick（index）}>Remove
))}
);
}
}

这绝对正确：-

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

根据我的理解，当您删除并刷新数据时，删除的数据会返回。 当所有的东西都存储在内存中时，这种情况就不可能发生了

解决方案：-您必须使用数据库，当您在数据库中保存数据时，您在数据库中执行该操作；当您删除数据时，您从数据库中删除数据&当您获取数据时，您从数据库中获取数据

---

因此，任何像更新、删除这样的操作现在都可以正常工作。

问题是，你为什么期望有所不同

这只是假的api，真的会像预期的那样工作。如果您正确发送更改/删除请求，它们将被存储，刷新将读取更新的数据（如果未缓存）

如果它是一个SPA（单页应用程序），就不需要刷新-这不应该发生。路由器可能出了问题？

您可以将数据放入，然后在重新加载请求之前始终检查是否有数据。