Question

我正在尝试向项目添加过滤器功能。从具有不同语言的条目列表中，创建所有语言的数组。用户应该能够单击一种语言并具有React过滤器以仅显示使用该语言的条目。但是，运行entries函数时，似乎无法正确更新filterIt状态。如果在运行setEntries(filtered)之后我console.log条目，结果是相同的。

const Archive = () => {
  const [entries, setEntries] = useState([]);
  let dreamFilter = [];

  //get all entries from firestore
  useEffect(() => {
    const unsubscribe = firebase
      .firestore()
      .collection("entries")
      .onSnapshot((snapshot) => {
        const newEntries = snapshot.docs.map((doc) => ({
          id: doc.id,
          ...doc.data(),
        }));
        setEntries(newEntries);
      });
    return () => unsubscribe();
  }, []);

  //after entries are loaded, create filter of all languages for 'dream'
  if (entries.length > 0) {
    const categoryMap = Object.values(entries)
      .reduce(
        (concatedArr, item) => concatedArr.concat(Object.entries(item)),
        []
      )
      .reduce((result, [category, values]) => {
        result[category] = result[category] || [];
        result[category] = result[category].concat(values);
        return result;
      }, {});

      dreamFilter = categoryMap.dream.filter(
        (item, pos) => categoryMap.dream.indexOf(item) === pos
      );
  }

  function filterIt(value) {
    const filtered = entries.filter(entry => ({
      ...entry,
      filtered: entry.dream.includes(value)
    }));
    console.log("filtered results = " + JSON.stringify(filtered));
    setEntries(filtered);
    return filtered;
  }

  return (
    <>
      <Navigation />
      <ul>
        {dreamFilter.map((language, i) => (
          <li key={i}>
            <a href="/" onClick={(value) => { filterIt(value); value.preventDefault(); }}>{language}</a>
          </li>
        ))}
      </ul>
      <ArchiveContainer>
        {entries.map((entry) => (
          <div key={entry.id}>
            <a href={"/entry/" + entry.id}>
              <h5>{entry.id}</h5>
              <p>{entry.dream}</p>
            </a>
          </div>
        ))}
      </ArchiveContainer>
    </>
  );
}

Answer 1

Filter方法应返回true或false。阅读更多here。如果要将一个数组转换为另一个对象的数组，请使用map。

您需要修改过滤器方法，如下所示：

const filtered = entries.filter(entry => entry.dream.includes(value));

Answer 2

在功能组件中，您不能直接更新状态。假设您在此处尝试也在条目数组中添加 filtered：true / false 。 array.filter 用于通过返回true / false来从数组中添加或删除对象。

function filterIt(value) {
 setEntries(entryList => entryList.map(item => ({
   ...item,
   filtered: item.dream.includes(value)
 })));
}

反应-无法正确过滤阵列

2 个答案: