英文:
How to let values as it is when conditionally rendering from one component to another
问题
我正在有条件地渲染两个具有相同路由的组件。第一个组件有两个输入字段和一个下一步按钮。按下下一步按钮后，我会渲染到下一个页面。但是，当点击返回按钮时，我如何获取之前输入的数据？我正在使用useRef()，但是当我再次回到第一个页面时，之前输入的所有数据都不再存在。所以，在两个组件之间有条件地渲染时，我该如何设置数据保持不变。
我尝试过使用useRef()，但当我按下返回按钮并回到第一个组件时，输入的值不再存在。
英文:
I am condinitionally rendering two componenets with the same route. First components has two input field and one next button. After pressing the next button I am rendering to the next page.
But when clicking on the back button how can I get the that I have entered earlier. I am using useRef() but when I am coming to the first page again then all the data that I have entered are not present.
So how can I set the data as it is while I am conditionally rendering between two components
I have tried with the useRef() but the entered values are not there when I am pressing the back button and reaching to that first component again.
答案1
得分: 1
这是发生的原因，因为您的输入数据没有保存。一旦组件从页面卸载，它的所有数据都会丢失，除非您将其存储在此组件之外。在React中有两种主要的方法来做到这一点：组件本地状态和状态管理库（redux或mobx）；
React文档中有一篇关于状态管理的优秀文章。
在您的情况下，最简单的解决方案是在容器组件内部创建状态钩子，您的条件渲染发生在其中，并将此状态和修改函数传递给包含输入的每个组件：
export const Routing = () => {
const [firstInput, setFirstInput] = useState('');
const [secondInput, setSecondInput] = useState('');
const [stage, setStage] = useState(0);
if (stage === 0) {
return <FirstComponent inputValue={firstInput} onInputChange={setFirstInput} />
}
if (stage === 1) {
return <SecondComponent inputValue={secondInput} onInputChange={setSecondInput} />
}
}
这种方法对于像这样的小规模情况是可以的，但当您的应用程序开始增长时，不同的模块开始使用相同的状态逻辑。它们经常需要使用相同的值并对其进行修改。在这一点上，管理此状态树变得非常复杂。特别是将状态作为props传递给整个子组件链。
这就是上述提到的库变得有用的地方。它们将应用程序状态管理移到单独的模块中，并为所有模块提供了一种访问和修改它的方式。
React还有一种组织大规模状态模块的方式：Context API和useReducer钩子，您可以在官方文档中了解更多信息。
英文:
That is happening because your input data is not stored. As soon as component is unmounted from the page all of its data is lost, unless you store it outside this component. There are two main ways to do it in react: component local state and state libraries (redux or mobx);
React documentation has a great article on state management.
In your case the easiest solution would be to create state hooks inside container component, where your conditional rendering takes place, and pass this state and modification functions to each component that contains your inputs:
export const Routing = () => {
const [firstInput, setFirstInput] = useState('');
const [secondInput, setSecondInput] = useState('');
const [stage, setStage] = useState(0);
if (stage === 0) {
return <FirstComponent inputValue={firstInput} onInputChange={setFirstInput} />
}
if (stage === 1) {
return <SecondComponent inputValue={secondInput} onInputChange={setSecondValue} />
}
}
This is approach is fine for small scale situations like this, when your application starts growing, different modules start to use the same state logic. They often times need to use the same values and modify it. In this point managing this state tree becomes very complicated. Especially passing state as props to the whole children components chain.
That is where aforementioned libraries come in handy. They move app state management in a separate module and provide a way for all modules to access it and modify.
React also has a way of organizing large scale state modules: Context API and useReducer hook, you can read about it in official docs
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论