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

Question

我是反应的新手，reux .当我点击提交按钮时。我想添加应该显示在另一个页面上的信息 比如名字和手机号码等。 不知道我该怎么办？请帮忙 这是我的代码。

应用.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);

联系人列表.js 这是我的联系人列表，我想添加我的联系信息

import React from 'react';
const ContactList = () => {
return (
<div>
<h1>Hii</h1>
</div>
)
}
export default ContactList;

Answer 1

如果您使用的是 redux：

1. 你需要做的是创建一个化简器来保存你的状态并对你的addContact方法做出反应。
您需要
2. 将联系人列表连接到您的州并返回您需要的数据("联系人"(
3. 使您的 addContact 操作正在将新联系人添加到"联系人"中，并且仅在添加所有数据时才调用 addAction。我不明白为什么您为每个字段提交而不是在填写两个字段时提交？

您的联系人列表应如下所示：

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

在您的联系人列表中，您可以像这样使用状态：

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

我希望这有帮助