在整个React JS页面中维持对象状态的方法是什么

Question

因此，在我们的项目中，数据将输入到第一页组件上，我们希望该数据出现在第五页上，而不是第二页、第三页、第四页上。 我们无法维持对象的状态直到第 5 页

Answer 1

您可以使用 Context 项。

您可以创建一个可以在多个组件中访问的对象。当然，这可以与状态结合起来。

1-创建上下文（在本例中，我制作了一个组件包装器，以便更轻松地包含在代码中。2-

export const DataContext= React.createContext({
  data: 60, //Default values in case no value is provided
  setData: () => {}
});

export function DataContextContainer({children}) {
  const [data, setData] = useState(60);

  return (
    <DataContext.Provider value={{ data, setData}}>
      {children}
    </DataContext.Provider>
  );
}

使用组件包装所需的组件（它将读取该数据）

import {DataContextContainer} from "./DataContextContainer";
 ...
<DataContextContainer>
    ...
         <YourComponent/>
    ...
</DataContextContainer>

3-现在您可以轻松访问该 组件使用钩子 useContext 或 上下文使用者

import {DataContext} from './DataContext'

...
    const {data, setData} = useContext(DataContext);
...

4-在您的输入中使用它：

<input type="text" value={data} onChange={(e) => setData(e.target.value)}/>