仅向 React App 获取一次数据。页面重新加载后不再获取

Question

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

在应用程序运行期间，会进行一些操作，例如从此 usersArray 中删除数据。

怎么了：

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

期待 ：

我只想一次且永远地获取这些数据。是否有可能以某种方式在 React 中实现这一目标，或者我做错了什么？

Answer 1

您可以将数据放入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>
    );
  }
}