如何访问在另一个 js 文件中的反应挂钩中完成的状态值

Posted 2023-02-21

【中文标题】如何访问在另一个 js 文件中的反应挂钩中完成的状态值

【英文标题】：How can I access a state value done in react hooks in another js file

【发布时间】：2019-12-07 02:20:21

【问题描述】：

我正在研究一个搜索栏，它在另一个文件中将调用 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;

【问题讨论】：

How to update parent's state in React?

您应该将状态向上移动到足够高的位置，以便任何需要它的组件都可以访问它。 Context API 在这里会很有用。

这并不是useState 的真正用途：它是基于类的组件中this.state 的替代品。就像你不能从外部访问组件的状态一样，你也不能上钩。将其向上移动并通过道具或上下文。或者使用单独的数据存储。

在我看来，使用 react context API 可以完美地工作，所以这里是使用上下文 API 的实现。使用useState 仍然会导致支柱钻孔。您可以在这里查看类似问题的答案Similar question answer

【参考方案1】：

看看那是不是你要找的。我将form 替换为div 以避免在sn-p 中提交行为。但逻辑是一样的。您需要在提交事件中执行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"/>

【参考方案2】：

据我了解，您应该能够在这些方法中将 Hooks 中的状态（从搜索栏）传递给父组件。

使用 Redux 并创建具有所需状态的全局存储 多变的。然后从搜索组件中，您将需要更新 Redux store 中的 state 变量，然后将这个 state 变量加载到 父组件。 从父组件创建一个状态变量并拥有它 作为道具传递给搜索组件。然后从搜索 组件，您将更新此道具。

我不是 100% 确定方法 2 是否会按预期工作，但我很确定方法 1 会有效。