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

Answer 2

如果希望一次 PER SESSION 检索数据，则可以使用会话存储；如果希望更好地控制数据的“到期”，则可以使用本地存储。在获取的回调中设置一个任意值，您将在每次应用加载时再次获取之前检查该值。 window.sessionStorage 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();

window.localStorage使用相同的语法

Answer 3

这是绝对正确的：-

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

据我了解，当您删除然后刷新然后删除的数据时，会返回。由于所有内容都已存储在内存中，因此这是当然的事情。

解决方案：-您必须使用数据库，将数据保存到db中时，将数据删除时，将其从db中删除，以及将数据从db中提取时，<< / p>

因此，像update，delete这样的任何操作现在都可以正常工作。

Answer 4

问题是您为什么期望有所不同？

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

如果它是SPA（单页应用程序），则无需刷新-不会发生。也许某事路由器出了错？

仅将数据提取一次到React App。页面重新加载后再也不会获取

4 个答案: