React.js父組件無法正確呈現子組件

Question

我是ReactJS的新手，但是已經遇到了一些我無法解決的問題...

我有一個叫做Tree的React組件。 該組件必須接收一些數據數組。 該數組中的每個元素都必須呈現為稱為Department的特殊子組件。

在一開始，Tree的狀態為{departments：[]}，因此tree必須為空。 但是后來我改變了Tree的狀態，在部門設置了新的數組，我看不到任何子元素。

關鍵是，樹的狀態確實會更新，並且真正會調用函數“ render”，並且當我通過部門運行時，我在自己的周期中得到了正確的迭代次數（已通過console.log檢查）。 但是仍然沒有子元素出現。

我的代碼有效，我嘗試使用固定的部門渲染樹組件並將此狀態在構造函數中設置為初始狀態。 樹和子組件工作正常。

因此，我無法想象，可能出了什么問題。

這是我的代碼，我的班級樹

class Tree extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            departments: []
        }
        this.componentDidMount = this.componentDidMount.bind(this);
    }

    componentDidMount() {
       var xhr = new XMLHttpRequest();
       xhr.open('GET', startAdress + '/tutors' + '/getAll', true);
       xhr.send();
       var tree = this;
       xhr.onreadystatechange = function() {
           if (xhr.readyState != 4) return;
           if (xhr.status != 200) {
               alert(xhr.status + ': ' + xhr.statusText);
           } else {
               var newDepts = JSON.parse(xhr.responseText);
               if (Array.isArray(newDepts.content)) {
                   tree.setState({
                       departments: newDepts.content
                   });
               }
           }
       };
   }

   render() {
       var a = this;
       console.log(JSON.stringify(this.state.departments));
       console.log(this.state.departments.length);
       return ( <div className={"Tree"}>
           {
               this.state.departments.forEach(function (department) {
                   console.log("creating branches");
                   return (
                       <Department key={department.name} department={department} />
                   );}
               ) }
           </div> )
   }
}

這是我的孩子部。 它使用了另一個名為TreeLine的組件，但我認為沒有必要將其放在此處。

class Department extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
        }
    }

    render() {
        console.log("department " + JSON.stringify(this.props.department));
        return (
            <div className={'Department'}>
                <TreeLine key={this.props.department.name } classNamePostfix={"Dep"}
                item={this.props.department} />
                {this.props.department.items.forEach(function (item) {
                             return (
                                 <TreeLine key={item.name} classNamePostfix={"Item"}  item={item} />
                            )})
                 }
            </div>
        );
    }
}

提前致謝！

Answer 1

而不是.forEach()您應該使用.map() 。

forEach遍歷數組的每個元素並對其進行處理，但是即使回調返回了某些內容， forEach也不會返回任何內容。 另一方面， map會創建一個新數組，並將在回調函數中返回的內容作為該新數組中的元素。

const a = [1,2,3].forEach((i) => {return <span>{i}</span>})
// a = undefined
const b = [1,2,3].map((i) => {return <span>{i}</span>})
// b = [<span>1</span>, <span>2</span>, <span>3</span>]