简体繁体 English

在从API进行Redux /状态更新之前反应组件渲染

[英]React component rendering before redux/state updates from API

原文 2017-08-01 08:07:36 7 1 javascript/ reactjs/ redux/ jsx

A week into learning React, and I've hit a snag. 学习React的一个星期，我遇到了麻烦。

So, I have an action/reducer setting up an external API to pass the payload into the state for my component to render some of the values out in a subcomponent (being passed as a prop object) - however, it takes a few seconds for the API to respond and obviously I cant ask react to render any values before then, as they return null and crash react.. 因此，我有一个操作/缩减程序，设置了一个外部API，以将有效负载传递到组件的状态中，以将某些值呈现在子组件中（作为prop对象传递）-但是，这需要花费几秒钟的时间API做出响应，显然我不能要求在此之前做出任何呈现值，因为它们返回null并当机。

Best practise? 最佳实践？ Set default values for the state values until the state gets updated to avoid the null errors? 为状态值设置默认值，直到状态得到更新以避免空错误？ Is there a better way? 有没有更好的办法？

Have tried a conditional render on the subcomponent (which will render the values) but didn't work. 在子组件上尝试了条件渲染（它将渲染值），但是没有用。

Any advice greatly appreciated! 任何建议，不胜感激！

1 个解决方案

You must first set some initial value of state inside of reducers which is generally null or empty object. 您必须首先在化简器内部设置一些状态初始值，通常是null或空对象。 Now inside of your render method you must use conditional rendering and return appropriate jsx from that. 现在，在您的render方法内部，您必须使用条件渲染并从中返回适当的jsx。 This is the standard way to get data from APIs and then rendering it inside of the component. 这是从API获取数据然后将其呈现在组件内部的标准方法。 This could probably help you. 这可能会对您有所帮助。