重置状态反应

Posted 2023-02-22

【中文标题】重置状态反应

【英文标题】：Reseting a State React

【发布时间】：2021-11-12 15:09:33

【问题描述】：

我有一个有输入的组件，当你输入一个值时，它会搜索另一个组件：

export default function Form( onSearch, countries, setCountries, input, setInput ) 


  function inputHandler(e) 
    setInput(e.target.value);
    onSearch(e.target.value);

    
  

  

  return (
    <form>
      <input
        type="text"
        value=input
        placeholder="Search for a country..."
        onChange=inputHandler
      ></input>)
   

在打字时，它会设置一个输入状态（setInput），并在这个组件中进行搜索并设置另一个状态（setSearch）：

function App() 
  const [input, setInput] = useState("");
  const [countries, setCountries] = useState([]);
  const [search, setSearch] = useState([]); 
function onSearch(name) 
    fetch(`https://restcountries.eu/rest/v2/name/$name`)
      .then((r) => r.json())
      .then((data) => 
        setSearch(data);
      );
  

当我输入时，我看到状态发生变化并进行搜索。问题是当我删除时，搜索状态会发生变化，但是当我在输入字段上没有字符时，搜索状态会在其中保留信息。我怎样才能回到初始状态？

【参考方案1】：

您可以在 Form 组件中添加一个 useEffect 来监视输入值的长度。如果长度为0，则清除搜索数组。

一个例子：

useEffect(() => 
   if(input.length === 0) setSearch([]);
, [input])