无法从 json 访问 Children，react-redux

Question

嗨，我可以访问联系人姓名 Ron 并在其中使用过滤器。但是，我无法访问 children 联系人 Alex 并在过滤器中使用它。我附上了我的输出截图。我还需要在其中打印 children Alex 并使用过滤器。提前致谢

        import React, {Component} from 'react';
        import ReactDOM from 'react-dom';

        let arr = [{"id":1,
        "number":true,
        "location":"2",
        "time":11,
        "code":1001,
        "name":"Ron",
            "children":[{
                "id":141,
                "number":true,
                "location":1,
                "time":1504969439000,
                "code":null,
                "name":"Alex"}]}]

      const Tab = ({ value }) => <div> {value} </div>;

      class App extends React.Component {
                constructor() {
                    super();
                    this.state ={
                        search: ''
                    };
                }
                updateSearch(event){
                    this.setState({search: event.target.value.substr(0,20)})
                }


        render() {
            let filteredContacts = arr.filter((item)=>{
            return item.name.toLowerCase().indexOf(this.state.search)!==-1;
            });

            return(<div> 
                <h1> Contact List </h1>
                <input type="text" 
                       value={this.state.search} 
                       placeholder="Search Here" 
                       onChange={this.updateSearch.bind(this)}  />
              <ul>
              {
                filteredContacts.map((obj, i) => 
                <Tab value={obj.name} key={i} />)
              }
             </ul>
             </div>
        );
      }
    }
    ReactDOM.render(<App/>, document.getElementById('container'));

Answer 1

您的过滤仅通过数组中的第一级联系人，因此 .children 中的任何联系人将永远不会显示或被过滤。

你想要做的是创建一个包含所有联系人的数组，但让它们处于相同的 "bottom" 级别 ([{name: 'Ron'}, {name: 'Alex'}])，以便我们可以过滤那个数组代替。

这样做的一种方法是首先 .map 遍历原始数组并确保我们同时获得 "bottom" (parent) 联系人和 children一个数组：（如果 ... 语法对你来说是新的，scroll to 'Spread in array literals' here）

const allContacts = originalContacts.map(parentContact => [parentContact, ...parentContact.children])

但这让我们得到了一个数组数组：[[{name: 'Ron'}, {name: 'Alex'}]]，这很难处理。所以我们想创建一个新数组，我们将 allContacts 数组中的所有数组连接成一个。幸运的是，有一种方法可以调用接受数组中参数的 .concat 方法。看起来有点奇怪，但我们可以这样做：（更多关于 .apply）

const allContactsFlattened = 
   Array.prototype.concat.apply([], allContacts);

现在我们得到了我们想要的：所有联系人的 "flat"（一级）数组。您的过滤器方法已经知道如何处理它，因此无需进行进一步的更改。

为了查看它的实际效果，我将您的代码包含在应用的更改中（以稍微不同的方式）+ 一些评论：

let originalContacts = [
 {"name":"Ron (parent)", "children":[{"name":"Alex (child)"}, {"name":"Emma (child)"}]},
  {"name":"Isa (parent)", "children":[{"name":"Sarah (child)"}, {"name":"Ahmad (child)"}]}
];

const Tab = ({ value }) => <div> {value} </div>;

class App extends React.Component {
  constructor() {
    super();
    this.state ={
      search: ''
    };
  }
  updateSearch(event){
    this.setState({search: event.target.value.substr(0,20)})
  }


  render() {
   let contactsAndSubContacts = 
      // flatten the result
     Array.prototype.concat.apply(
        // transform from parent =>  [parent, child1, child2 etc..]
       [], originalContacts.map(contact => [contact, ...contact.children])
      );
    let filteredContacts = contactsAndSubContacts.filter((item)=>{
     // NOTE: you probably want to use toLowerCase()
      // on this.state.search as well
      return item.name.toLowerCase().indexOf(this.state.search.toLowerCase())!==-1;
    });

    return(<div> 
        <h1> Contact List </h1>
        <input type="text" 
          value={this.state.search} 
          placeholder="Search Here" 
          onChange={this.updateSearch.bind(this)}  />
        <ul>
          {
            filteredContacts.map((obj, i) => 
                                 <Tab value={obj.name} key={i} />)
                                 }
        </ul>
      </div>
    );
  }
}
ReactDOM.render(<App/>, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

无法从 json 访问 Children，react-redux

Unable to access Children from json , react-redux

children

reactjs

redux

react-redux