我在React中有一个重定向问题

Question

I am new to react and i am creating a simple Contact Manager App, i have contacts and addContact components, these are separated in different routes. When i add a contact,it gets added to the local storage and the contacts component is getting the list of contacts from the local storage. The problem that when i add a contact and i redirect to the contacts page, the new contact doesn't show unless i manually refresh the page.

i tried this :

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

this too

window.location.href=window.location.hostname;

and i created a function to refresh the page if the previous link is the addContact link, it doesn't work either

this is the App component code:

 import React from 'react'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import Navbar from './components/navbar'; import Contacts from './components/contacts'; import About from './components/pages/about'; import AddContact from './components/pages/addContact' import NotFound from './components/pages/notFound' function getContactsLS() { let contacts; if (localStorage.getItem('contacts') === null) { contacts = []; } else { contacts = JSON.parse(localStorage.getItem('contacts')); } contacts = Array.from(contacts); return contacts; } class App extends React.Component { contactsLS = getContactsLS(); render() { return ( <Router> <Navbar /> <div className="container"> <Switch> <Route exact path="/add-contact" component={AddContact} /> <Route exact path="/" component={() => <Contacts contacts={this.contactsLS} />} /> <Route exact path="/about" component={About} /> <Route component={NotFound}/> </Switch> </div> </Router> ) } } export default App 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> 

this is addContact function :

 addContactEvent = () =>{ let contacts; if(localStorage.getItem('contacts')===null) contacts=[]; else{ contacts=JSON.parse(localStorage.getItem('contacts')); } contacts=Array.from(contacts); console.log(contacts); this.setState({key:contacts.length}); const contact = { key : contacts.length, name: this.state.name, email:this.state.email, phone:this.state.phone } contacts.push(contact); localStorage.setItem('contacts', JSON.stringify(contacts)); //redirection //this.props.history.push('/'); window.location.href=window.location.hostname; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script> 

Answer 1

You could use <Redirect> component from react-router-dom package. To get it working you initially setState where redirect is set to false.

this.state = {
  redirect: false
}

Once the addContact opeartion is done, update the state

this.setState({
  redirect: true
})

Inside of your AddContact component, the state will decide if it has to show the actual component or to redirect to the attached path. Something like this:

import {Redirect } from 'react-router-dom';
class AddContact extends React.Component {
  //Add the initial state
  // addContact Operation
  render(){
    if(this.state.redirect)
      return <Redirect to="/" />
    return (
       //The markup for AddContact
    )

  }
}

Answer 2

It feels like you would want the contacts as part of the state. In that case the code would be:

state = { contactLS: getContactsLS()}

But as we are calling values from localStorage a more appropriate place might be componentDidMount() method.From react docs

Avoid introducing any side-effects or subscriptions in the constructor. For those use cases, use componentDidMount() instead.

Then the code would be

componentDidMount(){
    const contacts =  getContactsLS()
    this.setState({ contacsLS: contacts })
}

Don't forget to change to this.state.contactsLS

<Route exact path="/" component={() => <Contacts contacts={this.state.contactsLS} />} />

====

PS
Another problem i can see in the existing code is the misuse of component constructor.
This is not obvious but the line

contactsLS = getContactsLS();

is equivalent to

constrcutor(){
   this.contactLS = getContactLS();
}

from react documentation we read

Typically, in React constructors are only used for two purposes:
- Initializing local state by assigning an object to this.state.
- Binding event handler methods to an instance.