重置状态反应答案

【问题标题】：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);
      });
  }

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

【问题讨论】：

标签： javascript reactjs components state rendering

【解决方案1】：

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

一个例子：

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

【讨论】：