reactjs - 在 ReactJS 中设置后不显示状态

Question

我收到一些数据作为道具，点击时我试图显示数组中的下一个项目。在渲染中，我调用{this.dropdown()}的是成功触发并显示数据的方法：

dropdown = () => {
  var dropdown = undefined
  if(this.props.catList){
    const cat = this.props.catList
    const list = JSON.stringify(this.props.catList)
    if(list.length > 0){
      dropdown = <div><p onClick={() =>{this.subCat()}}>{cat.title}</p>{this.state.firstSubCat}</div>
    }
  }
  return dropdown
}

接下来，当我单击项目时，子类别显示没有问题，并生成显示下一个功能状态的位置{this.state['sub'+cat.id]}：

subCat = () => {
  let subCat = []
  this.props.catList.children.map(cat => {
    subCat.push(<div key={cat.id}><p key={cat.id} onClick={() =>{this.searchSubCat(cat.id)}}>{cat.title}</p>{this.state['sub'+cat.id]}</div>)
  })
  this.setState({firstSubCat: subCat})
}

接下来的两个函数是循环遍历数组的其余部分以在单击时显示下一个项目。（请注意，我从一开始就没有使用它，因为第一行数据不是对象，而是包含 'children' 作为数组，所以现在我可以使用这两个函数）：

find = (array, id) => {
  // Loop the entries at this level
  for (const entry of array) {
      // If we found it, return it
      if (entry.id === id) {
          return entry;
      }
      // If not but there's a type array, recursively search it
      if (Array.isArray(entry.type)) {
          const found = find(entry.type, id);
          if (found) {
              // Recursive search found it, return it
              return found;
          }
      }
  }
  return undefined
}

searchSubCat = (id) => {
  let subCat = []
  const children = this.find(this.props.catList.children, id)
  children.children.map(cat => {
    subCat.push(<div key={cat.id}><p key={cat.id} onClick={() =>{this.searchSubCat(cat.id)}}>{cat.title}</p>{this.state['sub'+cat.id]}</div>)
  })
  this.setState({['sub' + id]: subCat})
}

到目前为止，没有弹出错误，但未显示生成的位置状态。当生成{this.state['sub'+cat.id]}显示状态的位置（使用这个：）时，我将其 id 传递给下一步以设置具有相同 id 的状态，因此状态应该在那里显示，但什么也没有。如果有人能看到问题出在哪里，请回复可以帮助我在这里会很棒！谢谢。

评论中要求的组件的完整代码：

import React, {Component} from 'react';


class SearchResult extends Component {

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

    }
  }

  find = (array, id) => {
    // Loop the entries at this level
    for (const entry of array) {
        // If we found it, return it
        if (entry.id === id) {
            return entry;
        }
        // If not but there's a type array, recursively search it
        if (Array.isArray(entry.type)) {
            const found = find(entry.type, id);
            if (found) {
                // Recursive search found it, return it
                return found;
            }
        }
    }
    return undefined
  }

  searchSubCat = (id) => {
    let subCat = []
    const subId = 'sub' + id
    console.log(subId)
    const children = this.find(this.props.catList.children, id)
    children.children.map(cat => {
      subCat.push(<div key={cat.id}><p key={cat.id} onClick={() =>{this.searchSubCat(cat.id)}}>{cat.title}</p>{this.state['sub'+cat.id]}</div>)
    })
    this.setState({['sub' + id]: subCat})
  }

  subCat = () => {
    let subCat = []
    this.props.catList.children.map(cat => {
      subCat.push(<div key={cat.id}><p key={cat.id} onClick={() =>{this.searchSubCat(cat.id)}}>{cat.title}</p>{this.state['sub'+cat.id]}</div>)
      console.log('sub--'+cat.id)
    })
    this.setState({firstSubCat: subCat})
  }
  dropdown = () => {
    var dropdown = undefined
    if(this.props.catList){
      const cat = this.props.catList
      const list = JSON.stringify(this.props.catList)
      if(list.length > 0){
        dropdown = <div><p onClick={() =>{this.subCat()}}>{cat.title}</p>{this.state.firstSubCat}</div>
      }
    }
    return dropdown
  }

  render() {
    return (
      <div>
        {this.dropdown()}
      </div>

    )
  }
}


export default SearchResult;

更新：

我使用 Redux 从服务器接收数组，将其发送到我的第一个组件，在该组件中我使用 map() 方法查找第一级数组并将其作为 props(catList) 的子组件发送到组件。不能在这里真正复制和粘贴 catList 道具值，所以这里是数组，我如何传递它和 console.log(this.props.catList) 的 IMG ：

大批：

[{"id":1,"title":"Electronics","path":"Electronics","children":[{"id":2,"title":"Accessories","children":[{"id":6,"title":"Portable Power Banks","children":[]},{"id":7,"title":"Charging Cables","children":[]},{"id":9,"title":"Batteries","children":[{"id":10,"title":"Disposable","children":[]},{"id":19,"title":"Rechargable","children":[]}]}]},{"id":3,"title":"Computers","children":[{"id":4,"title":"Components","children":[{"id":5,"title":"Laptops","children":[]}]}]}]},{"id":2,"title":"Accessories","path":"Electronics->Accessories","children":[{"id":6,"title":"Portable Power Banks","children":[]},{"id":7,"title":"Charging Cables","children":[]},{"id":9,"title":"Batteries","children":[{"id":10,"title":"Disposable","children":[]},{"id":19,"title":"Rechargable","children":[]}]}]},{"id":6,"title":"Portable Power Banks","path":"Electronics->Accessories->Portable Power Banks","children":null},{"id":7,"title":"Charging Cables","path":"Electronics->Accessories->Charging Cables","children":null},{"id":9,"title":"Batteries","path":"Electronics->Accessories->Batteries","children":[{"id":10,"title":"Disposable","children":[]},{"id":19,"title":"Rechargable","children":[]}]},{"id":10,"title":"Disposable","path":"Electronics->Accessories->Batteries->Disposable","children":null},{"id":19,"title":"Rechargable","path":"Electronics->Accessories->Batteries->Rechargable","children":null},{"id":3,"title":"Computers","path":"Electronics->Accessories->Computers","children":[{"id":4,"title":"Components","children":[{"id":5,"title":"Laptops","children":[]}]}]},{"id":4,"title":"Components","path":"Electronics->Accessories->Computers->Components","children":[{"id":5,"title":"Laptops","children":[]}]},{"id":5,"title":"Laptops","path":"Electronics->Accessories->Computers->Components->Laptops","children":null},{"id":11,"title":"Cars","path":"Cars","children":[{"id":12,"title":"Electronics","children":[{"id":13,"title":"Accessories","children":[{"id":14,"title":"Chargers","children":[]}]}]}]},{"id":12,"title":"Electronics","path":"Cars->Electronics","children":[{"id":13,"title":"Accessories","children":[{"id":14,"title":"Chargers","children":[]}]}]},{"id":13,"title":"Accessories","path":"Cars->Electronics->Accessories","children":[{"id":14,"title":"Chargers","children":[]}]},{"id":14,"title":"Chargers","path":"Cars->Electronics->Accessories->Chargers","children":null},{"id":15,"title":"DIY","path":"DIY","children":[{"id":16,"title":"Power Tools","children":[{"id":17,"title":"Accessories","children":[{"id":18,"title":"Batteries","children":[]}]}]}]},{"id":16,"title":"Power Tools","path":"DIY->Power Tools","children":[{"id":17,"title":"Accessories","children":[{"id":18,"title":"Batteries","children":[]}]}]},{"id":17,"title":"Accessories","path":"DIY->Power Tools->Accessories","children":[{"id":18,"title":"Batteries","children":[]}]},{"id":18,"title":"Batteries","path":"DIY->Power Tools->Accessories->Batteries","children":null}]

在这里我使用 map() 方法，将 prop catList 传递给组件：

this.props.searchRes.map(cat => {
  if(!cat.path.includes('->')){
    categories.push(<SearchResult filtered={false} title={cat.title} id={cat.id} catList={cat} key={cat.id}/>)
  }
})