Question

当onChange事件发生时，我正在尝试做多项事情。我看到了其他一些答案，但是所有这些答案都给出了错误“预期分配或函数调用，而是看到了表达式”。

import React, {useState, useEffect} from 'react';

function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(
    () => {
      const handler = setTimeout(() => {
        setDebouncedValue(value);
      }, delay);

      return () => {
        clearTimeout(handler);
      };
    },
    [value, delay],
  );

  return debouncedValue;
}

function App() {

  const [cardNames, setCardName] = useState([]);
  const [searchInput, setSearchInput] = useState("pikachu");
  const debouncedInput = useDebounce(searchInput, 1000)

  const rezCards = async () => {
    const rez = await fetch('https://api.pokemontcg.io/v1/cards?name='+searchInput+'')
    const json = await rez.json()
    setCardName(json.cards)
  }

  useEffect(() => {
    rezCards()
  },[debouncedInput])

  return <aside>
    <p>Search Term: {searchInput}</p>
    <form>
      <input id="search-field" type="text" value={searchInput} onChange = {
          searchCard => setSearchInput(searchCard.target.value)
        }></input>
    </form>
    <hr />
    <ul>
      {cardNames
      .map(
        (cardName) => {
          return <li key={cardName.id}><img src={cardName.imageUrl} /><span className="poke-cardname">{cardName.name}</span></li>
        }
      )}
    </ul>
    </aside>
}

export default App

该行是＃search-field输入中的onChange。我已经尝试过了：

<input id="search-field" type="text" value={searchInput} onChange = {
          () => { searchCard => setSearchInput(searchCard.target.value); console.log("Test"); }
}></input>

（console.log可以是任何东西，例如另一个函数。没关系，错误总是一样。）

Answer 1

好像您在要触发的多个功能周围缺少花括号。如果没有括号，则仅表示返回值（第一个函数）。

<input onChange={
  (searchCard) => {
    setSearchInput(searchCard.target.value);
    console.log("Test");
  }
}></input>

Answer 2

searchCard => setSearchInput(searchCard.target.value); console.log("Test");
---Problem is Here.


<input id="search-field" type="text" value={searchInput} onChange = {
              (searchCard) =>  {

                          setSearchInput(searchCard.target.value); 
                          console.log("Test"); 
              }
    }></input>

一个onChange中有多个功能？我所见的答案无效

2 个答案: