从按钮调用js myfn不是函数。

Question

我刚刚开始学习react，这是我的第一个react应用程序。我使用api来获取数据。到目前为止，它还可以工作，但是现在我想向从搜索栏组件中获得的函数中添加一个搜索关键字。

这是我的密码：

SearchBar.js

const SearchBar = ({ getUsers }) => {
  return (
    <div className="is-flex flex-align-items-center mb-3">
      <input type="text" id="query" className="input search-input" placeholder="search keyword"/>
      <Button className="search-btn ps-3 pe-3" 
      onClick={() => getUsers(document.querySelector('#query').value)}>
        <FontAwesomeIcon icon={faMagnifyingGlass} />
      </Button>
    </div>
  );
};

MasterUser.js

import { useState, useEffect } from "react";
import SearchBar from "./SearchBar";

const MasterUser = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    getUsers();
  }, []);

  const getUsers = async (query='') => {
    console.log('get users', query);
    try {
      let myurl = 'http://localhost:8080/users';
      const response = await fetch(myurl);
      const data = await response.json();
      setUsers(data);
      setIsLoading(false);
    } catch (e) {
      console.log(e.getMessage());
    }
  };

  return (
    <div>
      <SearchBar onClick={getUsers}/>
    </div>
  );
};

当应用程序加载时，控制台日志显示为get users <empty string>，并按预期返回所有用户，但当我单击search按钮(magnifyingGlass)时，它会给出一个错误Uncaught TypeError: getUsers is not a function。

任何帮助都是非常感谢的。

Answer 1

  <SearchBar onClick={getUsers}/>

您已经将道具命名为onClick，而不是getUsers。所以你才会犯这个错误。

是的，使用选择器(例如document.querySelector('#query').value)访问dom元素值也不是典型的反应。阅读有关可控性表单元素的信息(将表单元素值保存在状态中)。

Answer 2

使您的searchBar组件更具反应性，如下所示

const SearchBar = ({ getUsers }) => {
const [searchValue,setSearchValue]=useState('');
  return (
    <div className="is-flex flex-align-items-center mb-3">
      <input type="text" id="query" className="input search-input" placeholder="search keyword" value={searchValue} onChange={(e)=>setSearchValue(e.target.value)}/>
      <Button className="search-btn ps-3 pe-3" 
      onClick={() => getUsers(searchValue)}>
        <FontAwesomeIcon icon={faMagnifyingGlass} />
      </Button>
    </div>
  );
};