javascript - 如何修复我的 React 上下文以呈现 useEffect 并重新加载表数据

Question

我有一个输入表单，用于选择要在我的表格中呈现的数据。数据仅在强制页面重新加载后出现。我希望在我的输入中每次提交后使用用户输入的预期数据重新呈现数据。

为此我有:

• 一个名为 SymbolInput() 的输入函数，它将用户请求的数据发送到我的数据库。
• 一个表函数，PriceUpdate()，它通过 useEffect 从我的数据库加载数据。
• createContext 作为传输器，如果数据已发送到我的数据库并导致基于状态更改的重新呈现，则通过 useEffect 依赖项数组重新加载表。

问题:我没有收到任何错误，我知道我做错了什么，我无法为我的特定用例全神贯注于上下文 API。因此，我将不胜感激能为我自己提供一些说明，以帮助我理解 useContext 及其提供者。

这是我的代码:

下面我启动我的 createContext:

import { createContext } from 'react';

export const TableRefreshContext = createContext();
export default TableRefreshContext;

然后将上下文导入我的文件，其中包含我的输入表单。在这里，我使用状态作为触发器/键来重新呈现我的表。如果数据发送到我的数据库，则状态键递增 1，以希望触发我的表函数中的 useEffect 依赖项数组。

import TableRefreshContext from '../../../context/TableRefresh';

export default function SymbolInput()
{
  const { control, handleSubmit } = useForm();
  const [refreshKey, SetRefreshKey] = useState([0])

  const onSubmit = (data, e) =>
  {  

    axiosInstance
      .patch(URL, {
        stock_list: data.stock_list.map(list=>list.symbol),
      })
      .then((res) =>
      {
        SetRefreshKey(refreshKey + 1);
      });
  };

  return (
    <TableRefreshContext.Provider value={refreshKey}>
            <form> 
            </form> 
    </TableRefreshContext.Provider>
    );
}

这是我所说的表函数，其中我有一个 useEffect 从我的数据库中提取数据，以及它的依赖数组。

export function PriceUpdate()
{
    const [data, setData] = useState([]);
    const reloadTable = useContext(TableRefreshContext)
    useEffect(() =>
    {
        const fetchData = async () =>
        {
            const response = await axiosInstance.get(URL)
            const result = response.data;
            setData(result);
        };

        fetchData();
    }, [reloadTable]);

    return (
        <>
            <div>
            <TableRefreshContext.Provider value={reloadTable}>
                <PriceUpdates data={data[0]} />
                <PriceRanges data={data[0]} />
                <ReturnRates data={data[1]} />
                <QuickFacts data={data[2]} />
                <Recommendations data={data[4]} />
                <AdvancedStats data={data[3]} />
            </TableRefreshContext.Provider>

如何将我的输入和表格函数链接在一起，以允许我的页面呈现新数据而无需重新加载我的整个页面？

编辑:下面是我如何使用 PriceUpdate 组件，它是我的布局组件的子组件之一:

    const reloadTable = useContext(TableRefreshContext)

    return (
            <TableRefreshContext.Provider value={reloadTable}>
                <PriceUpdate />
            </TableRefreshContext.Provider>
    );
}

Answer 1

从您提供的当前代码来看，我认为它没有任何问题，除了 refreshKey 应该是一个数字而不是一个数组。我创建了一个 CodeSandbox project这与您的应用几乎完全相同，并且没有发现任何问题(请注意，不推荐使用这种使用 Context 的方式，因为它应该位于更高的层次结构中，如前一篇文章中所述)。

如果您的代码仍然无法正常工作，请尝试创建一个可以重现您的问题的 CodeSandbox 项目。