调用另一个页面后如何在React中保留状态值

如何解决调用另一个页面后如何在React中保留状态值

我有一个简单的React / Spring引导应用程序，我想将搜索字符串传递到详细信息页面，然后使用相同的searchString作为参数链接回父对象。

此时，父页面应获取该值并将其存储回状态。

就现有代码而言，当父级打开时，它将在状态中设置一堆值，包括搜索字符串：

constructor(props) {
    super(props);
    const {cookies} = props;
    this.state = {
      word: '',newWord: '',searchString: '',licenses: [],licensePage: [],csrftoken: cookies.get('XSRF-TOKEN'),isLoading: true,licensesPerPage: 7,activePage: 1,begin: 0,end: 7
    };

通过按父页面上的按钮来调用详细信息页面（编辑页面）：

<Button size="sm" color="primary" tag={Link} to={"/licenses/" + license.id}>Edit</Button>

通过选择“保存”或“取消”按钮，详细信息页面返回到父级：

<div>
    <Button color="primary" type="submit">Save</Button>{' '}
    <Button color="secondary" tag={Link} to="/licenses">Cancel</Button>
</div>

提交由“ onSubmit”函数处理，该函数调用“ handleSubmit：

<Form onSubmit={this.handleSubmit}>

这是handleSubmit-仅最后一行与此处相关：

async handleSubmit(event) {

    event.preventDefault();

    if(this.handleValidation()){
    } else {
      return;
    }

    const {item,csrftoken} = this.state;

    await fetch('/api/license' + (item.id ? '/' + item.id : ''),{
      method: (item.id) ? 'PUT' : 'POST',headers: {
        'X-XSRF-TOKEN': csrftoken,'Accept': 'application/json','Content-Type': 'application/json'
      },body: JSON.stringify(item),credentials: 'include'
    });
    this.props.history.push('/licenses');
  }

这是我需要更改的最后一行：

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

应为：

this.props.history.push('/license/search/{searchString}');

我只需要填充searchString。然后，我可以对取消应用相同的逻辑。

所以我的问题是，如何将searchString传递给孩子，然后在将URL传递给父对象时抓取它？

=======================尝试对“不是功能”错误实施答案失败========== >

我尝试了答案，但无法将其转换为基于类的方法（我使用的是类，而不是函数）。

这是代码。请注意，我已在变量名中临时添加了“ 2”，以免与现有代码混淆。

App.js

import React,{ Component } from 'react';
import './App.css';
import Home from './Home';
import { browserRouter as Router,Route,Switch } from 'react-router-dom';
import LicenseList from './LicenseList';
import LicenseEdit from './LicenseEdit';
import ImportList from './ImportList';
import { CookiesProvider } from 'react-cookie';

class App extends Component {

 state = {
    searchString2: ""
  };

  updateSearchString2 = (searchString2) => {
    this.setState({
      searchString2
    });
  };

  render() {
    return (
      <CookiesProvider>
        <Router>
          <Switch>
            <Route path='/' exact={true} component={Home}/>
            <Route path='/licenses' exact={true} component={LicenseList}
                searchString2={this.state.searchString2} // props passed will be same value passed to DetailsPage
                updateSearchString2={this.updateSearchString2}
            />
            <Route path='/imports' exact={true} component={ImportList}/>
            <Route path='/licenses/:id' component={LicenseEdit}/>
          </Switch>
        </Router>
      </CookiesProvider>
    )
  }
}

export default App;

许可证list.js中的相关代码

  <div>
    <input type="text" value={this.props.searchString2} onChange={(e) =>  this.props.updateSearchString2(e.target.value)} />

这给出了错误

TypeError: _this6.props.updateSearchString2 is not a function

有什么想法吗？

解决方法

对于searchString状态，您可以有1个真理来源，这样，该状态将作为属性向下传递给“ ParentPage”组件和“ DetailsPage”组件。为此，您可以为ParentPage和DetailsPage组件拥有一个公共的父组件。

export default class App extends React.Component {
  state = {
    searchString: ""
  };

  updateSearchString = (searchString) => {
    this.setState({
      searchString
    });
  };

  render() {
    return (
      <div className="App">
        <Route
          exact
          path="/"
          render={() => (
            <ParentPage
              searchString={this.state.searchString} // props passed will be same value passed to DetailsPage
              updateSearchString={this.updateSearchString}
            />
          )}
        />
        <Route
          path="/license"
          render={() => <DetailsPage searchString={this.state.searchString} />}
        />
      </div>
    );
  }
}

在这种情况下，无论发生任何路由或状态发生任何变化，searchString值将在整个组件中保持一致

为此要求：

这个想法是，如果searchString为null，则API将返回所有许可（如“ / licenses”一样），但是如果字符串中包含某些内容，它只会返回匹配的许可证。

由于您已经可以访问searchString，因此您现在可以根据searchString值获取条件语句，并评估是否需要API返回所有许可证等。