Javascript Reactjs不更新功能组件中的状态

我正在reactS中开发一个简单的应用程序。该应用程序的主要用途是它将显示一些卡片，在搜索时，卡片将被过滤并显示选择性卡片。我正在分享App.js的代码。 我有一个文件名“Robots.js”

import './App.css';
import CardList from './Components/CardList';
import Header from './Components/Header';
import {Robots} from './Components/Robots';

function App() {

  const [robots,setRobots] = useState({
    robo:Robots,
    search:''
  });

  const onSearchChange = (e) =>{
    setRobots({...robots,search:e.target.value});
    const filteredRobots = robots.robo.filter(item=>{return item.name.toLowerCase().includes(robots.search.toLowerCase())});
    //setRobots({...robots,robo:filteredRobots});
    console.log(filteredRobots);
  }

  return (
    <div>
      <Header onSearchChange={onSearchChange} />
      <CardList Robots={robots.robo}/>
    </div>
  );
}

export default App;

import'/App.css'；
从“./Components/CardList”导入卡片列表；
从“./Components/Header”导入标题；
从“./Components/Robots”导入{Robots}；
函数App（）{
const[robots，setRobots]=useState({
机器人：机器人，
搜索：“”
});
const onSearchChange=（e）=>{
setRobots（{…robots，search:e.target.value}）；
const filteredRobots=robots.robo.filter（item=>{return item.name.toLowerCase（）.includes（robots.search.toLowerCase（））}）；
//setRobots（{…机器人，机器人：filteredRobots}）；
控制台日志（filteredRobots）；
}
返回(
);
}
导出默认应用程序；

如果我评论

setRobots（{…robots，robo:filteredRobots}）
控制台上的这一行我可以显示数组正在减少它的项数，但有了这一行，它什么也没做。我认为应该这样做是有道理的。
我希望我能把我的观点讲清楚。
您可以一次更新状态，如下所示：

const onSearchChange=（e）=>{
const filteredRobots=robots.robo.filter（项=>{
return item.name.toLowerCase（）.includes（robots.search.toLowerCase（））
});
控制台日志（filteredRobots）；
赛特机器人({
机器人：过滤机器人，
搜索：e.target.value
});
}

由于您只有两个属性，您可以使用这些属性创建一个新对象，而不需要使用spread运算符。
设置机器人运行“异步”-因此，如果您有：

const[data, setData] = setState(5);

const update = (newData) => {
   setData(1);
   console.log(data) // will print 5
}

仅在第二次渲染中，其将打印1

您可以在此处阅读更多内容：

在您的实现中，您有一个问题，即您没有保存原始的卡阵列

所以首先保存原始数组

// Here will be the full list of cards.
const [cards, setCards] = useState(allCards);

// Here will be the search by text
const [search, setSearch] = useState("");

// Here will be all the filtered cards
// If you don't know whats useMemo is you can look in here: https://reactjs.org/docs/hooks-reference.html#usememo
const filteredCards = useMemo(()=>{
   return cards.filter((card) => 
      card.item.toLowerCase().contains(search.toLowerCase()));

},[cards, search])

// on search changed callback 
const onSearchChange = (e)=>{setSearch(e.target.value || '')}

// then return your component 
  return (
    <div>
      <Header onSearchChange={onSearchChange} />
      <CardList Robots={filteredCards}/>
    </div>
  );


//下面是卡片的完整列表。
常量[卡，设置卡]=使用状态（所有卡）；
//以下是文本搜索
const[search，setSearch]=useState（“”）；
//这是所有过滤过的卡片
//如果你不知道什么是有用的，你可以看看这里：https://reactjs.org/docs/hooks-reference.html#usememo
const filteredCards=usemo（（）=>{
返回卡片。过滤器（（卡片）=>
card.item.toLowerCase（）.contains（search.toLowerCase（））；
}，[卡片，搜索]）
//关于搜索更改回调
const onSearchChange=（e）=>{setSearch（e.target.value | |'''）
//然后返回您的组件
返回(
);
useffect（（）=>setRobots（{robo:Robots，search:'}），[Robots]）
尝试添加这个反应钩子useffect有一个不必要的依赖项：“Robots”。排除它或删除依赖项数组。像“Robots”这样的外部作用域值不是有效的依赖项，因为对它们进行变异不会重新呈现组件（非常感谢它的工作：）我有一个查询。这样，卡片将成功过滤，但在退格（删除字母）时，它会卡在过滤后的卡片上，这意味着当我们有空文本字段时，它应该显示所有卡片，但它只显示过滤后的一张。请你也指导我。感谢类似于
的方法如果（e.target.value==''{filteredRobots=Robots}
。Prob需要使
过滤器机器人
a
let
或
robo:e.target.value？filteredRobots:Robots
它只在textField为空时工作，但执行实时搜索意味着删除一些字母，它将显示更多卡片。我想我已经把我的观点讲清楚了。谢谢你为我找到了解决办法