Javascript 数组最初为空，但在用于筛选的文本字段中输入一个条目后，它已满

我将数组从一个组件转换到另一个组件。 初始数组由DB填充，并且不是空的。 如果我试图映射第二个组件中的数组，它是空的（长度=0）； 但是，在我在搜索框中写入一个值以过滤数组后，所有文章都会按预期显示。 那是怎么回事

export default function Einkäufe({ alleEinkäufe, ladeAlleEinkäufe, url }) {

const [searchTerm, setSearchTerm] = React.useState("");
const [searchResults, setSearchResults] = React.useState(alleEinkäufe);



const listeFiltern = (event) => {
setSearchTerm(event.target.value);
};

React.useEffect(() => {
setSearchResults(alleEinkäufe);
}, []);

React.useEffect(() => {
const results = alleEinkäufe.filter((eink) =>
  eink.artikel.toLowerCase().includes(searchTerm.toLowerCase())
);
setSearchResults(results);
}, [searchTerm]);


[...]

   {searchResults.map((artikel, index) => {
        return ( ... );
      })}
}

---

您的搜索词最初是

”

。安装组件时，所有效果都会运行，包括运行过滤器的效果。最初，它将尝试将任何文章与

“

匹配

您应该包括运行筛选器的条件

React.useffect（（）=>{
如果（搜索术语）{
const results=alleEinkäufe.filter（（eink）=>
eink.artikel.toLowerCase（）.includes（searchTerm.toLowerCase（））
);
设置搜索结果（结果）；
}
}，[searchTerm]）；

---

顺便说一句，

“

是错误的。

问题在于设置搜索结果列表的useEffect挂钩，在更新alleEinkäufe属性时不会重新运行。您需要添加alleEinkäufe作为它的依赖项

React.useffect（（）=>{
设置搜索结果（alleEinkäufe）；
}，[alleEinkäufe]）；

我敢打赌，呈现Einkäufe的父组件最初传递的是一个空数组，该数组用作searchResults状态，然后再也不会更新，因为带有空依赖项的useEffect数组在组件的装载上只运行一次

---

我还建议您使用英文变量名和函数名，尤其是当您请求帮助时，因为这有助于他人帮助您。

不，这不是解决方案。正如我所说，如果我最初用来自另一个组件的“所有购买”填充常量“searchResults”，那么它是空的，尽管“所有购买”不是空的