将数据从一页传递到另一页

Question

I am new in react,redux. When I click on submit button. I want to add information which should be displayed on another page like name and mobile no etc. don't know how should i do? Please help here is my code.

App.js

Here I mentioned my all routes

import React from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import {Switch,BrowserRouter as Router,Route,} from 'react-router-dom'

//importing components
import AddContact from './component/addContact';
import Save from './forms/save';
import ContactList from './forms/contactList';

//redux
import {Provider} from 'react-redux';
import store from './store';


function App() {
  return (
   <Provider store={store}>
     <Router>
       <Route exact path='/' component={Save}></Route>
       <Route exact path ='/add' component={AddContact}></Route>
       <Route exact path = '/contact' component={ContactList}></Route>
     </Router>
   </Provider>
  );
}

export default App;

Addcontacts.js

here is my add contact form where i add my information

import React, { useState, useEffect, useReducer } from 'react';

import { v4 } from 'uuid';

//redux
import { connect } from 'react-redux';
import { addContact } from '../action/contact';
import { Link } from 'react-router-dom';

const AddContact = () => {

    const [name, setName] = useState('');
    const [number, setNumber] = useState('');

    const handleNameSubmit = e => {

        if (name === '') {
            return alert('please add name')
        }
        const Contact = {
            name,
            id: v4()
        }

        addContact(Contact);

        setName('')


    }

    const handleNumberSubmit = e => {

        if (number === '') {
            return alert('please add number')
        }

        const Contact = {
            number,
            id: v4()
        }

        addContact(Contact);

        setNumber('')

    }


    return (
        <form>
            <h1 style={{ textAlign: 'center' }}>Add Contact</h1>
            <div className='container'>
                <div className='form-group'>
                    <label style={{ float: 'left' }}>Name</label>
                    <input type="text"
                        className="form-control"
                        id="exampleInputEmail1"
                        aria-describedby="emailHelp"
                        placeholder='Enter Your Name'
                        required
                        value={name}
                        onChange={e => setName(e.target.value)} />
                </div>
                <div className='form-group'>
                    <label style={{ float: 'left' }}>Mobile No</label>
                    <input type="number"
                        className="form-control"
                        id="exampleInputMobile"
                        aria-describedby="emailHelp"
                        placeholder='Enter Your Mobile No'
                        required
                        value={number}
                        onChange={e => setNumber(e.target.value)} />
                </div>
                <div className='form-group'>
                    <label style={{ float: 'left' }}>Gender</label>
                    <select className='form-control'>
                        <option>Male</option>
                        <option>Female</option>
                        <option>Other</option>
                    </select>
                </div>
                <Link to='/contact'>      <button className='btn btn-primary' id='btn1' onClick={() => {
                    handleNameSubmit();
                    handleNumberSubmit();
                }}>Submit</button></Link>
                <span><button className='btn btn-primary' id='btn2'>Cancle</button></span>
            </div>

        </form>
    )
}

const mapStateToProps = state => ({})

const mapDispatchToProps = dispatch => ({
    addContact: contact => {
        dispatch(addContact(contact));
    },
});



export default connect(mapStateToProps, mapDispatchToProps)(AddContact);

ContactList.js here is my contact list their i want to add my contact info

import React from 'react';

const ContactList = () => {
    return (
        <div>
            <h1>Hii</h1>
        </div>
    )
}
export default ContactList;

Answer 1

If you are using redux:

1. you have to do is create a reducer that holds your state and reacts to your addContact method.
2. you need to connect your ContactList to your state and return the data you need ("contacts")
3. Make yure that your addContact action is adding the new contact to "contacts" and only call addAction when all your data is added. I dont understand why you have submits for each field instead of just submitting it when both fields are filled?

You ContactList should look something like this:

// deconstruct your properties from props
const ContactList = ({ contacts }) => {
    return (
        <ul>
          {contacts.map(({ name, email, number }) => (
             <li>
               <h1>Hii {name}</h1>
             </li>
        </ul>
    )
}
// deconstruct "contacts" from your global state object
const mapStateToProps = ({ contacts }) => ({
  contacts
});

const mapDispatchToProps = dispatch => ({});

export default connect(mapStateToProps, mapDispatchToProps)(ContactList);

Alternatively I can recommend a global-hook lib that will make such things much easier.

npm install --save rx-global

Then in you component you can use it like this:

import { v4 } from 'uuid';
import { Link } from 'react-router-dom';
import { setGlobalState } from "rx-global";

const addContact = contact => updateGlobalState("contacts", state => [...state, contact]);

const AddContact = () => {
const [name, setName] = useState('');
const [number, setNumber] = useState('');

const handleSubmit = () => {
  addContact({ name, number });
  setName("");
  setNumber("");
};

return (
    <form>
        <h1 style={{ textAlign: 'center' }}>Add Contact</h1>
        <div className='container'>
            // ...your code...
            <Link to='/contact'>      
               <button className='btn btn-primary' id='btn1' onClick{handleSubmit}>
                 Submit
               </button>
            </Link>
            <span>
              <button className='btn btn-primary' id='btn2'>
                Cancle
              </button>
            </span>
        </div>

    </form>
)
};

And in your ContactList you can use the state like this:

import { useGlobalState } from "rx-global";

const ContactList = () => {
    const [contacts] = useGlobalState("contacts", []);
    return (
        <ul>
          {contacts.map(({ name, email, number }) => (
             <li>
               <h1>Hii {name}</h1>
             </li>
        </ul>
    )
}

I hope this helps