Question

我有一个简单的带有授权的React应用程序，该应用程序使用-jwh令牌和Redux魔术代码完成，我无法理解这一点（并希望在可能的情况下不要接触该技术-也真的不喜欢它）面向新手的模糊且复杂的编写样式）。但这就是歌词。

因此，登录后将某些令牌保存在某个地方，这发生了一些魔术，这有两个后果：现在我将user.id放在props.user中，并且可能会使用axios调用api端点，（通常不使用验证）。

现在，我有用户登录历史记录表，并且我想在页面上显示与用户关联的数据表。我应该在哪里获取数据库？我发现最新的最简单方法是使用componentWillMount()方法轮询后端api（轮询mongoDb）。然后，我可以访问render()中的数据，以显示用户表。那是对的吗？还是我被迫以某种方式与Redux“同步状态”？还是什么？我迷失了范式。

PS。可以进行轮询，但是如果数据是由另一个用户动态更新的，则我看不到有关他已登录的更新（没有刷新页面）。

Answer 1

一种简单的方法是-如您所说-在组件的componentDidMount或componentWillMount挂钩中获取数据。

请注意，因为您在其中一个钩子中调用了API，但这并不意味着您的数据将在首次调用render函数时立即可访问。您的API调用可能是异步的，您的组件将不等待其执行来呈现。

因此，您需要为要提取的数据使用某种占位符，例如，您可以这样做（不使用redux，仅将数据存储在组件状态中）

class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isFetchingData: false,
      data: null
    };
  }

  componentDidMount () {
    this.setState({ isFetchingData: true });
    apiCall().then((data) => {
      this.setState({
        isFetchingData: true,
        data
      });
    });
  }

  render () {
    if (!this.state.data) {
      return <p>No data</p>;
    }

    if (!this.state.isLoading) {
      return <p>Loading data</p>;
    }

    // Render your component with data
  }
}

Answer 2

如果可能的话，我建议您在不使用Redux的情况下进行基本逻辑处理，这需要花一些时间让范式沉入-如何以及为何使用它们等。其次componentWillMount是（将是）已弃用，它从来不是放置数据请求的地方，而是componentDidMount（如docs中所述）。

React的基本处理方法是在componentDidMount中调用请求，然后然后通过setState将响应置于组件状态，这将导致使用新数据。使用Redux，您可以执行类似的操作，在同一位置 dispatch action ，该操作调用请求，然后然后将响应放入通过 reducer 的全局状态。但是，要使组件根据状态更改进行更新，需要将其订阅到该状态的该部分。最简单的方法是用react-redux的connect高阶函数包装组件，然后通过mapStateToProps对象将状态的那部分作为道具传递给组件。 / p>

如果与仅具有本地组件状态相比，所有这些听起来都很多，那就是这个，这就是为什么我建议首先尝试在没有Redux的情况下实现逻辑的原因。这些额外的步骤在大型项目中具有其优点，在大型项目中，拥有一个全局状态（而不是在各处传递处理程序）和该状态的大型容器组件是有益的，但是它要习惯很多样板。

现在，问题的第二部分是，如果我没有记错的话，当其他用户在其他地方更新数据时，是否更新状态？这是网络上的典型问题，您无法使用React或Redux解决它，因为它与它们无关，但需要不断检查更改。换句话说，您需要让服务器通知您的React应用数据已更改的方式。

您可以通过以下两种方式进行操作：

快速而肮脏的解决方案，您可以在其中启动setInterval 组件中的计时器，以不断发送请求并更新每 X 秒声明一次（请不要忘记clearInterval 在组件卸载之前，否则它将继续发送请求不确定）
使用server-sent events来获取数据时的通知改变了
使用WebSockets或socket.io获得与以下功能相同的功能服务器端事件，或者您也可以移动所有数据通过这些服务之一进行通信，而不是通过标准的HTTP请求

在反应中从数据库获取数据的正确方法是什么？

2 个答案: