Reactjs 为什么子组件不能在react中渲染

我的疑问是为什么不调用子组件库subchild，而是使用无限渲染

我的库组件正在从本地url获取JSON，然后设置结果

import React, { Component } from 'react';

     import LibrarySubChild from './Library';

    class Library extends Component {

      state = {
            libraries: []

          };

          componentDidMount() {
            console.log("library componentDidMount method called");
            this.fetchData();
         }

         fetchData = () => {

           fetch('/library/get-all-library',{ mode: 'no-cors'})
           .then(res => res.json())
           .then((data) => {
             this.setState({ libraries: data })
             console.log(this.state.libraries)
           })
           .catch(console.log);

      };

         render() {
           console.log("library render method called");
           const arrLength=this.state.libraries.length;
           return (
             this.state.libraries.length>0 ?
             <LibrarySubChild libraries={this.state.libraries} /> : arrLength
         );
         }

    }

    export default Library;

import React，{Component}来自'React'；
从“/Library”导入LibrarySubChild；
类库扩展了组件{
状态={
图书馆：[]
};
componentDidMount（）{
log（“调用了library componentDidMount方法”）；
这是fetchData（）；
}
fetchData=（）=>{
获取（'/library/get all library'，{mode:'no cors'}）
.then（res=>res.json（））
。然后（（数据）=>{
this.setState（{libraries:data}）
console.log（this.state.libraries）
})
.catch（console.log）；
};
render（）{
log（“调用了库呈现方法”）；
const arrLength=this.state.libraries.length；
返回(
这个.state.libraries.length>0？
：棱长
);
}
}
导出默认库；

下面的组件未渲染

 import React, { Component } from 'react';

 const LibrarySubChild = ({ libraries }) => {
   console.log("library sub child render method called");
      return (
        <div>
          <h1>Contact List</h1>
          {libraries.map((library) => (
            <div key={library.libid}>

                <h5>{library.libName}</h5>


            </div>
          ))}
        </div>
      )
    };

    export default LibrarySubChild;

import React，{Component}来自'React'；
const LibrarySubChild=（{libraries}）=>{
log（“调用的库子级呈现方法”）；
返回(
联系人名单
{libraries.map（（library）=>(
{library.libName}
))}
)
};
导出默认LibrarySubChild；

解决这个问题的最好办法是什么

从控制台进行o/p

---

调用的库componentDidMount方法 库渲染方法调用

---

调用的库componentDidMount方法

---

（2） [{…}，{…}]这是控制台输出，它在componentDidMount之前执行无限长的时间。 state libraries值（其长度决定LibrarySubChild是否被渲染）是在Library componentDidMount之后获取的（应该如此）。这会导致子组件在componentDidMount之后发生更改，特别是创建LibrarySubChild的实例之后，应该使用新的LibrarySubChild创建新的Library实例

问题是，为什么LibrarySubChild从未被渲染过——而不是库中的无限componentDidMount循环

答：如上所述，这是因为（1）创建了库状态值重置为0（在构造函数中）的库的新实例，而不是简单地运行componentDidMount一次，这是因为React的diffing算法（详见下文）和（2）确定渲染内容的状态库值，是在组件生命周期的返回/呈现阶段执行的，该阶段对于库来说必然没有任何状态值，因为（1.）-重新装载是因为库的根元素以p标记开始，并更改为作为根的LibrarySubChild

换句话说，请注意，在上图中，呈现是在componentDidMount之前执行的。每当库被实例化（或重新装入）时，都会执行fetchData，这会将库状态更改为具有>0个元素，进而导致根元素从p标记更改为LibrarySubChild，正如我们所知，这会导致重新装入，然后返回到平方一（无限库循环和从不调用/呈现LibrarySubChild背后有一个逻辑——这个问题就在眼前）

现在…您可能会想“componentDidMount对任何组件只运行一次…建议总是在那里获取数据，对吧…”

一般来说，这是肯定的——但必须注意React的差异算法（or）是组件是否重新安装的核心。那么，组件何时必须重新安装（从而触发componentDidMount）？：

每当根元素具有不同的类型时，React将拆下旧树并从头开始构建新树。从到、从到、从到-任何这些都将导致完全重建

库的根值是否在变化？实际上，从一个p标签到一个多p标签的LibrarySubChild组件

 import React, { Component } from 'react';

 import LibrarySubChild from './Library';

 class Library extends Component {

 state = {
        libraries: []
      };
        //componentDidMount RUNS **AFTER RETURN/RENDER**
            componentDidMount() {

           //Infinitely loops because new instances repeatedly made
           //As React's diffing algorithm notes change in underlying 
           //root element types.

            console.log("library componentDidMount method called");
            this.fetchData();
         } 

        fetchData = () => {
         fetch('/library/get-all-library',{ mode: 'no-cors'})
         .then(res => res.json())
         .then((data) => {

          //Side note: Try not to mutate state directly, like below: 

Suggestion: this.setState({libraries [...this.state.libraries, data]})             

         this.setState({ libraries: data })
         console.log(this.state.libraries)
       })
       .catch(console.log);

   };

     render() {
       console.log("library render method called");
       const arrLength=this.state.libraries.length;
       return (
           this.state.libraries.length>0 ?
         <LibrarySubChild libraries={this.state.libraries} /> : 0
     );
   }
}

export default Library;

import React，{Component}来自'React'；
从“/Library”导入LibrarySubChild；
类库扩展了组件{
状态={
图书馆：[]
};
//componentDidMount在返回/渲染后运行****
componentDidMount（）{
//无限循环，因为重复创建新实例
//React的差分算法注意到了底层结构的变化
//根元素类型。
log（“调用了library componentDidMount方法”）；
这是fetchData（）；
} 
fetchData=（）=>{
获取（'/library/get all library'，{mode:'no cors'}）
.then（res=>res.json（））
。然后（（数据）=>{
//旁注：尽量不要直接改变状态，如下所示：
建议：this.setState（{libraries[…this.state.libraries，data]}）
this.setState（{libraries:data}）
console.log（this.state.libraries）
})
.catch（console.log）；
};
render（）{
log（“调用了库呈现方法”）；
const arrLength=this.state.libraries.length；
返回(
这个.state.libraries.length>0？
: 0
);
}
}
导出默认库；

祝你好运，

---

Mo

请解释无限渲染库componentDidMount方法称为库渲染方法称为库componentDidMount方法称为（2）[{…}，{…}]这是控制台输出，它会持续无限时间