javascript - 只获取一次数据到 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>
    );
  }
}