重置状态反应

Question

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

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);
      });
  }

我在打字时看到状态发生了变化并进行了搜索。问题是当我删除时，搜索状态会改变，但是当我在输入字段中没有字符时，搜索状态会保留信息。如何回到初始状态？

Answer 1

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

一个例子：

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

重置状态反应

Reseting a State React

javascript

components

state

rendering

reactjs