Question

我正在努力学习React作为我正在使用Udacity的课程的一部分。我一直在与这个问题作斗争几天，似乎无法摆脱它。

基本上，我有一个API调用，它返回一个对象数组作为一个promise，我映射或过滤这些（我已经尝试过两者）并且需要找到数组.id中已经存在的元素。我通过比较每个对象的.shelf属性来做到这一点。找到匹配后，我需要将'none'属性设置为与现有数组中的属性相同的值，如果该书不存在，我需要将其值设置为shelf。这里的一切都很好，但问题是当我找到匹配时，属性会将.shelf更新为正确的，但迭代会继续下一本显然不匹配的书并覆盖class SearchBar extends Component { state = { query: '', result: [] } getBooks = (query) => { const booksOnShelves = this.props.books; BooksAPI.search(query) .then(res => { if (res instanceof Array && res.length > 0) { res.filter( searchedBooks => { return booksOnShelves.filter( onShelves => { if ( searchedBooks.id === onShelves.id) { return searchedBooks.shelf = onShelves.shelf } else { return searchedBooks.shelf = 'none } }) }) this.setState({result: res.sort(sortBy('title'}) } else { this.setState({result: []}) } }) .catch( err => { console.log('ERROR: ', err)}) }值没有。

以下是此特定方法的代码：

{{1}}

我尝试了很多东西，但没有人能够保持货架属性的价值。

有没有办法阻止迭代覆盖匹配的值？

任何想法如何实现预期结果？

提前感谢您的帮助。

Answer 1

在你的情况下应该可以正常工作：

BooksAPI.search(query).then(res => {
if (res instanceof Array && res.length > 0) {
  booksOnShelves.forEach((book) => {
    const correspondingRes = res.find((item) => { return (item.id === book.id) });
    if (correspondingRes) {
      book.shelf = correspondingRes.shelf;
    } else {
      book.shelf = “none”;
    }
  });
}

Answer 2

问题在你们所有人的帮助下排序我已经成功了。非常感谢。

仅供参考，这是有效的代码。

security-#badlogins

React.JS：嵌套过滤器/映射数组

2 个答案: