时间戳

首页 > 解决方案 > 如何在 json 数组中搜索，并在我输入输入时返回结果

javascript - 如何在 json 数组中搜索，并在我输入输入时返回结果

问题描述

到目前为止，如果我键入我的 api 中存在的确切名称，我只能搜索数组的一个元素，在这个我的 api 有一个包含 20 个位置的数组，如果我准确输入我搜索的元素的名称，它会返回一个包含 19 的数组未定义的位置和找到数组的 1 个位置，我想在键入时执行和搜索，而不是仅在键入全名时进行搜索。搜索后，我尝试更改组件的状态，以便仅使用获取的值呈现它，但这不会发生，如果有人知道我非常感激。

updated code

 import data from "../sample_data/recipes.json";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      searchString: []
    };
  }

  componentDidMount() {
    this.setState({ searchString: data.results })

  }

  onChange(fieldName) {
    if (fieldName === '' || fieldName === null) this.setState({ searchString: data.results });

    var indexes = data.results.filter((item, i) => {
      return item.title.toLowerCase().indexOf(fieldName.toLowerCase()) !== -1;    
    })  
    this.setState({ searchString : indexes });
  }

  render() {
    return (
      <div className="App">
        <Navbar onChange={this.onChange.bind(this)} />
        <div className="container mt-10">
          <div className="row">
            {<RecipeItem list={this.state.searchString} />}
          </div>
        </div>
      </div>
    );
  }
}

export default App;

标签： javascriptreactjs

解决方案

  • 搬到setState外面去map。
  • 用 for 循环替换 map

也许试试这个？

  var indexes = [];
  data.results.forEach(item => {
   if(item.title.indexOf(myObjTitle.title)) {
    indexes.push(item);
   }
  });
  this.setState({searchString : indexes});

推荐阅读