我读到componentDidMount只在初始渲染时被调用一次,但我看到它被渲染了多次.

我似乎创建了一个递归循环.

  • componentDidMount分派操作以获取数据
  • 收到数据后,它会启动成功操作以将数据存储在redux状态.
  • 父react组件连接到redux store,在上面的步骤中刚刚更改的条目有mapStateToProps
  • 父级渲染子组件(通过变量以编程方式 Select )
  • 再次调用子组件的componentDidMount
  • 它显示获取数据的操作

我想这就是正在发生的事情.我可能错了.

我怎样才能阻止循环?

下面是以编程方式呈现子组件的代码.

 function renderSubviews({viewConfigs, viewConfig, getSubviewData}) {

   return viewConfig.subviewConfigs.map((subviewConfig, index) => {
     let Subview = viewConfigRegistry[subviewConfig.constructor.configName]
     let subviewData = getSubviewData(subviewConfig)

     const key = shortid.generate()
     const subviewLayout = Object.assign({}, subviewConfig.layout, {key: key})
     return (
       <div
         key={key}
         data-grid={subviewLayout}
         >
         <Subview
           {...subviewData}
           />
       </div>
     )
   })
 }

推荐答案

组件实例将只装载一次,删除时将卸载.在您的情况下,它会被删除并重新创建.

keyprops 的目的是帮助React找到同一组件的早期版本.通过这种方式,它可以用新props 更新以前的组件,而不是创建新props .

React通常可以在没有键的情况下正常工作,但包含项目的列表除外.它希望在那里有一个密钥,以便在项目被重新排列、创建或删除时跟踪.

在这种情况下,你的react 明显不同于之前的react .在每个渲染上都会提供一个新的关键点.这会迫使用户将上一个实例视为已被删除.该组件的任何子组件也会被卸下和拆除.

你应该做的是不要(永远)随机生成密钥.键应始终基于组件显示的数据的标识.如果不是列表项,则可能不需要密钥.如果是列表项,最好使用从数据标识派生的键,例如ID属性,或者多个字段的组合.

如果生成一个随机密钥是正确的做法,React会帮你解决这个问题.

您应该将初始获取代码放在React树的根目录中,通常是App.不要把它放在某个随机的子元素身上.至少你应该把它放在应用生命周期内存在的组件中.

将其放入componentDidMount的主要原因是,它不会在服务器上运行,因为服务器端组件永远不会装入.这对于通用渲染非常重要.即使你现在不这么做,你也可能以后再这么做,做好准备是最好的做法.

Reactjs相关问答推荐

useLazyQuery不会更新所有组件之间的数据

更新数据时有关CQR和更新UI的问题

如何在useEffect中使用useParams()

props 可以在Reaction中锻造吗?

cypress 不能点击SPAN

App.js中的H2组件不会动态呈现.这可能是什么问题?

一键MUI导出

在Reaction中管理多个状态

无法找出状态正在被更改的位置

当 URL 与我声明的任何路由都不匹配时,如何使用不会重定向到错误页面的动态 URL? - react 路由 dom

我无法通过 useContext 显示值

无法使用react-hook-form和react-places-autocomplete在字段中输入值

Chakra UI:如何在选中状态下设置复选框 colored颜色

React - 错误边界未捕获错误

React:如何设置光标 Select

ReactJS:useMemo 钩子修复了我的无限重新渲染问题而不是 useEffect

如何修复 Next.js 13 中类型 AppRouterInstance 上不存在 x?

如何使用 babel 将 SVG 转换为 React 组件?

如何在 React 中的 Material Ui 多选中设置默认值?

为什么 state redux-toolkit 是代理?