在迭代字符串数组后如何获得一个对象数组？

Question

我的简单应用程序有：

• 数据：对象数组
• 用户、setUsers: useState钩子
• 过滤器：字符串数组
• filteredUsers：它应该是一个对象数组；

在我的应用程序中，用户可以点击并将一个字符串添加到过滤器数组中（过滤器会发生改变），然后我想创建一个新的经过筛选的对象数组filteredUsers，并发送它到用户（通过setUsers(filteredUsers)），并基于过滤器渲染一个新的列表。

当我使用单个字符串时，例如getFilteredUsers('string')，它可以工作，但我无法使用数组。

const users = [
    {
  id: 849,
  name: 'John',
  city: 'London',
  languages: ['English']
  },
  
  {
  id: 294,
  name: 'Ola',
  city: 'Stockholm',
  languages: ['Swedish', 'English']
  },
  
  {
  id: 585,
  name: 'Stefano',
  city: 'Naples',
  languages: ['Italian', 'French']
  },
  
  {
  id: 946,
  name: 'Anna',
  city: 'Paris',
  languages: ['French']
  }
]

const four = document.querySelector('.four');
const arrayFilter = arr => {
        const newUsers = filters.map(filter => getUsers(filter));
    four.textContent = JSON.stringify(newUsers);
    return newUsers
}
const test = ['French'];
console.log(arrayFilter(test))

我也尝试使用useEffect方法，但没有任何结果。

jsfiddle: https://jsfiddle.net/gmp5doqv/165/
GitHub：https://github.com/lukaasz555/job-list/blob/main/components/Main/Main.tsx

- lukaasz555

---

这里有几个问题需要立即解决。在你的 arrayFilter 函数中，你实际上没有对传入的 arr 参数进行任何操作。此外，在该函数中，当你执行 filters.map 时，filters 引用了上面设置的值，即 const filters = ['French', 'Naples'];。 - CaseyC

你可能想要走这个方向：const arrayFilter = filterArray => { const newUsers = filterArray.map(filter => getUsers(filter))[0]; four.textContent = JSON.stringify(newUsers); return newUsers } const filterArray = ['French']; console.log(arrayFilter(filterArray)) - CaseyC

Answer 1

这是一个用于检查用户是否通过过滤器的函数：

const checkUser = (user, filter) =>
  user.name === filter || user.city === filter || user.languages.includes(filter);

这是一个检查用户是否通过所有过滤器的函数：

let filters = null;
const userFilter = user => {
  for(let i = 0, l = filters.length ; i < l ; i++) {
    if(!checkUser(user, filters[i])) {
        return false;
    }
  }
  return true;
}

这是如何使用它的方法：

filters = ['French', 'Naples'];
filteredUsers = users.filter(userFilter);
// gives Stefano, the only one with French and Naples

filters = ['English'];
filteredUsers = users.filter(userFilter);
// gives John and Ola, the only ones with English

filters = [];
filteredUsers = users.filter(userFilter);
// gives everyone !

filters = ['Portuguese'];
filteredUsers = users.filter(userFilter);
// gives no one

- Christophe Quintard

Answer 2

以下是使用React和数组方法.some和.includes执行此过滤器的示例

// Get a hook function
const { useState } = React;

function App() {
    const users = [
      {
        id: 849,
        name: 'John',
        city: 'London',
        languages: ['English']
      },
      {
        id: 294,
        name: 'Ola',
        city: 'Stockholm',
        languages: ['Swedish', 'English']
      },
      {
        id: 585,
        name: 'Stefano',
        city: 'Naples',
        languages: ['Italian', 'French']
      },
      {
        id: 946,
        name: 'Anna',
        city: 'Paris',
        languages: ['French']
      }
    ];
    const languages = [
      'English',
      'Swedish',
      'Italian',
      'French'
    ];
    const [selectedLangs, setSelectedLangs] = useState(
      Object.fromEntries(languages.map(s => [s, false]))
    );
    
    function handleCheckboxClick({target}) {
      const { value, checked } = target;
      const selectedClone = structuredClone(selectedLangs);
      const state = selectedClone[value];
      selectedClone[value] = !state;
      setSelectedLangs(selectedClone);
    }
    
    const selectedLangsThatAreTrue = Object.entries(selectedLangs)
      .filter(([lang, val]) => val)
      .map(([lang]) => lang);
    const targetData = users.filter(
      ({languages}) => 
      languages.some(lan => selectedLangsThatAreTrue.includes(lan))
    );
    
    return (
        <div className="App">
          Select Languages: 
          {
            languages.map(s => (
              <label key={s}> {s} 
                <input value={s} 
                  onClick={handleCheckboxClick}
                  type="checkbox" />
              </label>
            ))
          }
          <br />
          {
            targetData.map(({name}) => <span key={name}> {name} </span>)
          }
          
        </div>
    );
};

// Render it
ReactDOM.createRoot(
    document.getElementById("root")
).render(
    <App />
);

.App label {
  user-select: none;
}

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>

- async await