1

我必须完成这个项目，我很难理解这些钩子是如何工作的。我对 React 完全陌生，我想知道如何获取我的 Input 字段的值，以便我可以使用它并修改我正在使用的 API (omdb) 的 URL。（见 ${inputValue} ）

这是代码：

function App() {
  const [searchResult, setSearchResult] = useState()


  useEffect(() => {
    const search = async () => {


      const response = await fetch(
        `http://www.omdbapi.com/?apikey=aaaaaa&s=${inputValue}`,
      )

      const data = await response.json()
      console.log(data);

      if (!searchResult) {
        setSearchResult(data);

      }
    }

    search()
  })

  return (
    <div className="App">
      <div className="search">
        <input type="text" placeholder="Search..." />
        <button>Search</button>
      </div>
      {!searchResult ? (
        <p>No results yet</p>
      ) : (
          <div className="search-results">
            <div className="chevron">
              <ChevronLeft />
            </div>
            <div className="search-results-list">
              {searchResult.Search.map(result => (
                <div key={result.imdbID} className="search-item">
                  <img
                    src={result.Poster === 'N/A' ? placeholderImg : result.Poster}
                    alt="poster"
                  />
                  <div className="search-item-data">
                    <div className="title">{result.Title}</div>
                    <div className="meta">{`${result.Type} | ${result.Year}`}</div>
                  </div>
                </div>
              ))}
            </div>
            <div className="chevron">
              <ChevronRight />
            </div>
          </div>
        )}
    </div>
  )
}

起初看起来很简单，我以为我可以查询选择输入标签的值，但由于某种原因不起作用。我一直在四处寻找，但似乎没有任何效果，而且我尝试过的方法返回“未定义”。

谢谢您的帮助！！

4

2 回答 2

0

您可以将 inputValue 定义为状态：

  const [inputValue, setInputValue] = useState("");

给 inputValue 赋值，onChange 回调需要给 inputValue 赋值：

      <input
        type="text"
        value={inputValue}
        onChange={(e) => {
          setInputValue(e.target.value);
        }}
      />

最小工作示例：https ://codesandbox.io/s/stoic-bell-j3e2p?file=/src/App.js:180-328

于 2021-02-06T16:22:35.073 回答
0

首先，为您的输入值设置一个状态：

const [inputVal, setVal] = useState('');

然后，将 value 和 onChange 添加到您的输入中：

<input type="text" placeholder="Search..." value={inputVal} onChange={onInputChange} />

创建一个函数将输入值设置为状态

function onInputChange(evt) {
  setVal(e.target.value);
}

使用您输入的状态值作为您的依赖数组useEffect

useEffect(() => {
  const search = async (value) => {
    const response = await fetch(
      `http://www.omdbapi.com/?apikey=a461e386&s=${value}`,
    );

    const data = await response.json();

    if (!searchResult) {
      setSearchResult(data);
    }
  }

  if (inputVal) {
    search(inputVal);
  }
}, [inputVal])
于 2021-02-06T16:18:51.207 回答