从按钮调用时反应js myfn不是函数

Question

我刚刚开始学习 React js，这是我的第一个 React js 应用程序。我正在使用 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> 并且它 returns 所有用户都符合预期，但是当我点击搜索按钮（放大镜）时它给出了一个错误 Uncaught TypeError: getUsers is not a function.

感谢任何帮助..

Answer 1

使您的 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>
  );
};

Answer 2

  <SearchBar onClick={getUsers}/>

您将道具命名为 onClick 而不是 getUsers。这就是您收到该错误的原因。

是的，使用选择器（例如 document.querySelector('#query').value）访问 dom 元素值也不是典型的反应。了解 controlled 个表单元素（在状态中保存表单元素值）。

从按钮调用时反应js myfn不是函数

react js myfn is not a function when called from a button

reactjs

use-state