Question

我在数组中有任意数量的对象，并且每个对象都有一个嵌套的subValues数组。我正在努力能够使用搜索过滤组件。我能够成功搜索父级对象，但是我仍然希望能够基于每个顶级嵌套值数组进行过滤。

就我而言，我可以搜索value（它是一个字符串），但是我不知道如何搜索subValues（它是一个包含任意数量的字符串的数组。） / p>

在下面的代码段中，您可以看到搜索“一”，“二”等将返回父级value，但是如果您尝试搜索“子”，则不会返回任何内容。数组subValues。

jsfiddle here。下面的代码段。

任何指导将不胜感激。

class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            currentValue: null,
            search: '',
        }
    }

    updateSearch = (event) => {
        this.setState({
            search: event.target.value,
        })
    }

    render() {
        const Values = {
            valuesList: [{
                value: 'value one',
                subValues: [
                    'sub value one',
                    'sub value two',
                ]
            }, {
                value: 'value two',
                subValues: [
                    'sub value three',
                    'sub value four',
                ]
            }, {
                value: 'value three',
                subValues: [
                    'sub value five',
                    'sub value six',
                ]
            }
            ]
        };

        let filteredValues = Values.valuesList.filter(
            (values) => {
                return (
                    values.value.toLocaleLowerCase().indexOf(this.state.search.toLocaleLowerCase()) !== -1
                );
            }
        );

        var renderValues = filteredValues.map((valueItem, i) => {
            var renderSubValues = valueItem.subValues.map((subValues, j) => {
                return (
                    <p key={j}>{subValues}</p>
                )
            });
            return (
                <div
                    onClick={() => this.getValue(valueItem.value)}
                    key={i}
                >
                    <p>{valueItem.value}</p>
                    <p>{renderSubValues}</p>
                </div>
            )
        })
        return (
            <div>
                <input
                    placeholder="search"
                    type="text"
                    value={this.state.search}
                    onChange={this.updateSearch.bind(this)}
                />
                {renderValues}
            </div>
        )
    }
}

ReactDOM.render(<App/>, document.querySelector("#app"))

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
}

div {
  padding-bottom: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="app"></div>

Answer 1

可以修改您的过滤器方法以同时检查subValues。

我们可以将JavaScript的some()方法与includes()一起使用。

 let filteredValues = Values.valuesList.filter(
   (values) => {
     return (
       values.value.toLocaleLowerCase().includes(this.state.search.toLocaleLowerCase()) ||
       values.subValues.some(item => item.toLocaleLowerCase().includes(this.state.search.toLocaleLowerCase()))
     );
   }
 );

演示：

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      currentValue: null,
      search: '',
    }
  }

  updateSearch = (event) => {
    this.setState({
      search: event.target.value,
    })
  }

  render() {
    const Values = {
      valuesList: [{
        value: 'value one',
        subValues: [
          'sub value one',
          'sub value two',
        ]
      }, {
        value: 'value two',
        subValues: [
          'sub value three',
          'sub value four',
        ]
      }, {
        value: 'value three',
        subValues: [
          'sub value five',
          'sub value six',
        ]
      }]
    };

    let filteredValues = Values.valuesList.filter(
            (values) => {
                return (
                    values.value.toLocaleLowerCase().includes(this.state.search.toLocaleLowerCase()) ||  values.subValues.some(item => item.toLocaleLowerCase().includes(this.state.search.toLocaleLowerCase()))
                );
            }
        );

    var renderValues = filteredValues.map((valueItem, i) => {
      var renderSubValues = valueItem.subValues.map((subValues, j) => {
        return ( <
          p key = {
            j
          } > {
            subValues
          } < /p>
        )
      });
      return ( <
        div onClick = {
          () => this.getValue(valueItem.value)
        }
        key = {
          i
        } >
        <
        p > {
          valueItem.value
        } < /p> <
        p > {
          renderSubValues
        } < /p> < /
        div >
      )
    })
    return ( <
        div >
        <
        input placeholder = "search"
        type = "text"
        value = {
          this.state.search
        }
        onChange = {
          this.updateSearch.bind(this)
        }
        /> {
        renderValues
      } <
      /div>
  )
}
}

ReactDOM.render( < App / > , document.querySelector("#app"))

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
}

div {
  padding-bottom: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="app"></div>

在搜索结果中包含嵌套的地图数组值

1 个答案: