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

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

根据我的理解，您应该能够在这些方法中将 Hooks 中的状态（从搜索栏）传递给父组件。使用 Redux 并使用所需的状态变量创建一个全局存储。然后从搜索组件中，您将需要更新 Redux 存储中的状态变量，然后在父组件中加载此状态变量。从父组件创建一个状态变量，并将其作为道具传递给搜索组件。然后从搜索组件中，您将更新此道具。我不是 100% 确定方法 2 是否会按预期工作，但我很确定方法 1 会工作。