无法从 json 访问子级，react-redux

Question

您好，我可以访问联系人姓名 Ron 并在其中使用过滤器。但是，我无法访问儿童联系人 Alex 并在过滤器中使用它。我附上了我的输出截图。我还需要在其中打印儿童 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 中的任何联系人将永远不会显示或被过滤。

您要做的是创建一个包含所有联系人的数组，但将它们置于相同的“底部”级别 ([{name: 'Ron'}, {name: 'Alex'}])，以便我们可以过滤 that 数组.

这样做的一种方法是首先.map 覆盖原始数组，并确保我们将“底部”（父）联系人和子联系人都放在一个数组中：（如果... 语法对您来说是新的, 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);

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

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

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>