我在一個(gè)數(shù)組中有任意數(shù)量的對(duì)象,每個(gè)對(duì)象都有一個(gè)嵌套的 subValues 數(shù)組。我正在努力能夠使用搜索過(guò)濾組件。我能夠成功搜索父級(jí)對(duì)象,但我一直希望能夠根據(jù)每個(gè)頂級(jí)嵌套值數(shù)組進(jìn)行過(guò)濾。就我而言,我可以搜索value, 這是一個(gè)字符串,但我不知道如何搜索subValues,這是一個(gè)包含任意數(shù)量字符串的數(shù)組。在我下面的代碼段中,您可以看到搜索“一”、“二”等將返回父級(jí)別value,但如果您嘗試搜索“子”,則數(shù)組中不會(huì)返回任何內(nèi)容subValues。任何指導(dǎo)將不勝感激。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> ) })
在搜索結(jié)果中包含嵌套的地圖數(shù)組值
肥皂起泡泡
2021-10-07 10:51:17