在整个 React js 页面中维护对象状态的方法有哪些

Question

所以在我们的项目中，数据将在第 1 页组件中输入，我们希望在第 5 页而不是第 2、3、4 页上输入数据。我们无法维持对象的状态直到第 5 页

Answer 1

您可以使用 Context 项。

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

1-创建上下文（在这种情况下，我做了一个组件包装器，以便更容易包含在代码中。

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>
  );
}

2-用组件包装你想要的组件（将读取该数据）

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

3- 现在您可以轻松地访问任何使用钩子包装的组件中的对象 useContext or a context consumer。

import {DataContext} from './DataContext'

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

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

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

在整个 React js 页面中维护对象状态的方法有哪些

What are the ways of maintaining state of an object throughout the react js pages

reactjs

react-props

react-state-management