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})
}

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

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 prop值，因此这是服务器的完整数组，我如何通过它，并会添加控制台记录的IMG，但似乎我至少需要10名才能做到这一点。

数组：

[{"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}/>)
  }
})

如果有人可以看到问题所在，请做出回应，可以帮助我，这将很棒！谢谢。

在ReactJS中动态放置和设置状态时显示状态的正确方法是什么？

0 个答案: