反应如何在过滤器仍然存在的情况下返回上一页

Question

很难弄清楚这一点。

我有 2 个组件

1. 一个过滤器组件和一个表格视图组件
2. 具有更多信息和功能的数字表视图的增强视图

我想从组件 2 返回到组件 1，但过滤器还在原位吗？

我怎样才能做到这一点？

我试过了

this.props.history.push('/1');

它会返回但不保留过滤器？

export default class FilterComponent extends React.Component {
    constructor(props) {
        super(props)
        this.state = {name:[]}
    }
    

    componentDidMount() {
        fetch("https://jsonplaceholder.typicode.com/todos")
            .then((response) => response.json())
            .then(
                (data) => data.map(e => 
                      this.setState({name:[...this.state.name,  e.id]})
                  ))
    }




    onTrigger = (event) => {
        this.props.parentCallback(event.target.value);
        event.preventDefault();
        
    }

   

    render() {

        if(this.state.name.length < 1) {

            return (
                <div>
                <p1> Loadings</p1>
                </div>
            )
        } else {
            return (
                <div className="contactfForm">
    <select onChange={this.onTrigger}>
        <option> ID </option>
        {this.state.name.map((result)=>(<option title={result}>{result}</option>))}
    </select>

Answer 1

我猜你渲染过滤器两次，在组件 1 内和组件 2 内。如果你想导航和保存状态，你有两个基于反应的选项，还有一个 JS 选项：

在路由器切换器外部移动过滤器

如果你在路由器的 Switcher 之外渲染过滤器，当改变路由时，只有组件 1 和组件 2 会重新渲染，过滤器不会。

在全局状态下存储过滤器状态

如果在路由器的切换器之外渲染过滤器是不可行的（因为过滤器可能不会在应用程序的每个页面中渲染），您可以将过滤器状态保存在全局状态中（例如，使用 React Contexts，请参阅https://reactjs.org/docs/context.html; 或 Redux）。

如果您使用 React Contexts，您可以在路由器之外创建提供程序，并在 Filters 组件内部检索和修改其值。这样您就可以保持组件之间的状态。

在本地存储中保存过滤器状态

如果您想在刷新页面时也保留状态，您可以将过滤器状态存储在浏览器的本地存储中。每次呈现过滤器组件时，您都会从本地存储中检索值，并且每次修改过滤器时，您都会保存它。这也将使得在更改页面时，由于本地存储被托管，过滤器状态也被托管。