將數據從一頁傳遞到另一頁

Question

我是反應新手，redux。 當我點擊提交按鈕時。 我想添加應該顯示在另一個頁面上的信息，例如姓名和手機號等。不知道該怎么辦？ 請幫助這里是我的代碼。

應用程序.js

在這里我提到了我的所有路線

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;

添加聯系人.js

這是我的添加聯系表，我在其中添加我的信息

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 這是我的聯系人列表，我想添加我的聯系信息

import React from 'react';

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

Answer 1

如果您使用的是 redux：

1. 您要做的就是創建一個減速器來保存您的 state 並對您的 addContact 方法做出反應。
2. 您需要將您的聯系人列表連接到您的 state 並返回您需要的數據（“聯系人”）
3. 確保您的 addContact 操作正在將新聯系人添加到“聯系人”，並且僅在添加所有數據后才調用 addAction。 我不明白您為什么要為每個字段提交而不是在兩個字段都填寫時才提交？

您的 ContactList 應如下所示：

// 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);

或者，我可以推薦一個全局鈎子庫，它會讓這些事情變得更容易。

npm install --save rx-global

然后在您的組件中，您可以像這樣使用它：

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>
)
};

在您的 ContactList 中，您可以像這樣使用 state：

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>
    )
}

我希望這有幫助