如何访问另一个JS文件中的React挂钩中完成的状态值

Question

我在搜索栏上工作，在另一个文件中，该文件将呼叫unsplash-api，我有一个搜索栏组件，我正在考虑在主文件中进行API调用，或者是否在SRC文件夹中的另一个文件中建议其他明智的呼叫

到目前为止，我已经设置了一个组件并设置了初始挂钩，但我不知道如何前进

import React, { useState } from 'react';
import './SearchBar.css';
const SearchBar = () => {
  const [search, setSearch] = useState('');
  return (
    <form>
      <input className="Search" placeholder="Search Images" />
      <button type="submit" id="submit" className="search-button">
        <i className="icon">search</i>
      </button>
    </form>
  );
};
export default SearchBar;

Answer 1

查看您是否正在寻找的内容。我替换了form的div，以避免在摘要中提交行为。但是逻辑是相同的。您需要在提交事件上进行event.preventDefault。

function mockSearchAPI(searchValue) {
  return new Promise((resolve,reject) => {
    setTimeout(() => resolve('Search results for: ' + searchValue), 2000);
  });
}
function App() {
  const [searchResults,setSearchResults] = React.useState('');
  const [loading, setLoading] = React.useState(false);
  function doSearch(searchValue) {
    setLoading(true);
    mockSearchAPI(searchValue)
    .then((results) => {
      setSearchResults(results);
      setLoading(false);
     });
  }
  return(
    <React.Fragment>
      <SearchBar
        doSearch={doSearch}
      />
      {loading &&
        <div>Loading...</div>
      }
      {searchResults && 
        <div>{searchResults}</div>
      }
    </React.Fragment>
  );
}
const SearchBar = (props) => {
  const [search, setSearch] = React.useState('');
  
  function onClick() {
    console.log(search);
    props.doSearch(search);
  }
  
  return (
    <div>
      <input 
        //className="Search" 
        placeholder="Search Images" 
        onChange={(event)=>setSearch(event.target.value)}
      />
      <button 
        //type="submit"
        //id="submit"
        //className="search-button"
        onClick={onClick}
      >
        <i className="icon">search</i>
      </button>
    </div>
  );
};
ReactDOM.render(<App/>, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"/>

Answer 2

从我的理解中，您应该能够将钩子(从搜索栏(传递到这些方法中的父组件。

1. 使用Redux并创建具有所需状态的全局商店多变的。然后从搜索组件中您需要更新Redux商店中的状态变量，然后将此状态变量加载到父组件。
2. 从父组件创建状态变量并拥有它将搜索组件作为道具传递给。然后从搜索中组件，您将更新此道具

我不是100％确定方法2是否会按预期工作，但我很确定方法1会起作用。