如何在没有导航的情况下从一个组件获取值到另一个 page/component？

Question

我有一个 navbar 组件，其中有一个输入搜索栏。目前我正在获取搜索栏的值并导航到 Results 组件并访问输入值 useParams.

我的 Results 组件中有 let [ result, setResult ] = useState([]);，因为在使用页面上的按钮输入搜索后，结果可能会发生变化。问题是我无法在定义 useState 时设置初始结果，因为我是从 API.

中获取的

所以每次我渲染时，我首先得到一个空数组和失败的承诺，然后我得到想要的。如何解决这个问题？我需要搜索栏位于导航栏中。

这是代码。 React 新手。

const Navbar = () => {

    let navigate = useNavigate();
    const handleKeyDown = (event) => {
        if (event.key === 'Enter') {
            let value = event.target.value;
            navigate(`/results/${value}`); 
        }
    }
    
    return (
        <nav className='navigation'>
            <div className='left-slot'>
                <button>runtime</button>
            </div>

            <div className="middle-slot">
                <input className="after" 
                placeholder="get runtimes" onKeyDown={handleKeyDown}>
                </input>
            </div>

            <div className='right-slot'>
                <button>How It Works</button>
                <button>Coming Soon</button>
            </div>
        </nav>
    );
}

const Results = () => {

    let { value } = useParams();
    let [ result, setResult ] = useState();

    useEffect(() => {
        fetchArrayByPage(value, page, option).then(res => setResult(res))
    }, [value])

    console.log(value);
    console.log(result);
    
    return (<div></div>)

}

Answer 1

尝试使用包装函数来获取和设置。我会建议这样的事情：

async function handleResults(){
    const res = await fetchArrayByPage(value, page, option)
    setResult(res)
}

然后就可以在useEffect里面调用了

Answer 2

我不完全确定为什么您的代码不起作用，所以我将提供三个选项。

选项 1 - 如果您的问题是 value 未定义。

将 Results 中的 useEffect 更改为：

useEffect(() => {
  fetchArrayByPage(value && value.length ? value : '', page, option).then(res => setResult(res))
}, [value]);

选项2 - 如果你需要传递道具并且Navbar和Results不在不同的路线上。

只需将 value 作为 props 从 Navbar 传递到 Results。

选项 3 - 不使用 props 传递组件。

使用Context API。这使您能够跨组件共享数据，而无需手动将 props 从父级传递给子级。

在上下文中初始化变量。

创建包含上下文的单独文件。

import React, { createContext } from 'react';

const NavbarContext = createContext(null);

export default NavbarContext;

如果您使用的是 Typescript，则将所述上下文导入 App.js 或 App.tsx。
声明变量并将它们存储在对象中供以后引用。

const [value, setValue] = useState('');
...

const variables = {
    value,
    setValue,
    ...,
};

用提供者包装。将上下文变量传递给提供者，使组件能够使用 variables.

return (
  <NavbarContext.Provider value={variables}>
    ...
  </NavbarContext.Provider>
);

导入并使用 Navbar 和 Results 中的所有变量。

const { value, setValue, ... } = useContext(NavbarContext);

如何在没有导航的情况下从一个组件获取值到另一个 page/component？

How to get value from one component to another page/component without navigation?

javascript

promise

reactjs

react-router

react-hooks