Javascript 在使用react路由器重定向后,如何从redux reducer初始化react组件状态
我有一个组件,它有一个html按钮,单击该按钮时应该重定向到react组件,并向redux reducer中的数组分派一个字符串。重定向到使用reactrouter的组件通过调用两个智能协定函数来初始化其状态,该函数使用从重定向到的原始组件发送的字符串。两个智能合约函数调用返回两个对象。需要使用这两个对象设置状态。返回的对象是正确的数据,但页面不会加载。此组件与另一个组件完全相同,只是两个智能合约调用不接受参数,但返回对象中完全相同的数据Javascript 在使用react路由器重定向后,如何从redux reducer初始化react组件状态,javascript,reactjs,redux,react-router,web3js,Javascript,Reactjs,Redux,React Router,Web3js,我有一个组件,它有一个html按钮,单击该按钮时应该重定向到react组件,并向redux reducer中的数组分派一个字符串。重定向到使用reactrouter的组件通过调用两个智能协定函数来初始化其状态,该函数使用从重定向到的原始组件发送的字符串。两个智能合约函数调用返回两个对象。需要使用这两个对象设置状态。返回的对象是正确的数据,但页面不会加载。此组件与另一个组件完全相同,只是两个智能合约调用不接受参数,但返回对象中完全相同的数据 import React, { Component, u
import React, { Component, useEffect, useState } from "react";
import { connect, useDispatch, useSelector } from "react-redux";
import './index.css'
import MyWeb3 from '../../utils/myWeb3'
import Incidents from '../../contracts/Incidents.json'
import SocialNet from '../../contracts/SocialNet.json';
import {Link, Route, withRouter} from 'react-router-dom'
const Member = () => {
const [profile, setProfile] = useState({});
const dispatch = useDispatch();
const [list, setList] = useState([]);
const [posts, setPosts] = useState([]);
useEffect(async () => {
try {
const accounts = await MyWeb3.getInstance().getAccounts();
console.log(accounts)
const incidents = MyWeb3.getInstance().getContract(Incidents)
const incidentsInstance = await MyWeb3.getInstance().deployContract(incidents);
const sn = MyWeb3.getInstance().getContract(SocialNet)
const pro = socialNetworkContract.members[0];
const snInstance = await MyWeb3.getInstance().deployContract(sn);
const p = await incidentsInstance.usersProfile(pro,{ from: accounts[0] });
const a = await snInstance.getUsersPosts(pro,{ from: accounts[0] });
console.log(a)
console.log(pro, p)
for (var i = 0; i < a.length; i++) {
console.log(a[i].words[0]);
const post = await snInstance.getPost(a[i].words[0])
// const pos1 = await GetImage(pos.image)
setList(oldArray => [...oldArray, post])
dispatch({ type: 'ADD_POST', response: post })
console.log('----------- post------------')
console.log(post)
}
// const po = await snInstance.getMyPosts({ from: accounts[0] });
setProfile(p)
console.log(profile)
// console.log(po);
// setPosts(po)
// const num = await snInstance.getMyPostno({ from: accounts[0] });
// const list = await getPosts(snInstance, 5);
console.log(profile, accounts);
} catch (e) {
console.error(e)
}
}, [])
const addFriend = async (event) => {
event.preventDefault();
try {
console.log(window.web3.currentProvider)
} catch (e) {
console.error(e)
}
}
const postInWall = async (event) => {
event.preventDefault();
try {
console.log(window.web3.currentProvider)
} catch (e) {
console.error(e)
}
}
const socialNetworkContract = useSelector((state) => state.socialNetworkContract)
// const profile = this.state.incidents.profiles(this.props.user)
return (
<div>
<div class="card hovercard">
<div class="cardheader">
</div>
<div class="avatar">
<img alt="" src="http://lorempixel.com/100/100/people/9/" />
</div>
<div class="title">
<a target="_blank">Name : {profile.name}</a>
</div>
<div class="desc">Location : {profile.location}</div>
<div class="desc">Description : {profile.description}</div>
<button variant="primary" onClick={addFriend}>Add Friend</button>
<button variant="primary" onClick={postInWall}>Post in wall</button>
<div class="bottom">
<a class="btn btn-primary btn-twitter btn-sm" href="https://twitter.com/webmaniac">
<i class="fa fa-twitter"></i>
</a>
<a class="btn btn-danger btn-sm" rel="publisher"
href="https://plus.google.com/+ahmshahnuralam">
<i class="fa fa-google-plus"></i>
</a>
<a class="btn btn-primary btn-sm" rel="publisher"
href="https://plus.google.com/shahnuralam">
<i class="fa fa-facebook"></i>
</a>
<a class="btn btn-warning btn-sm" rel="publisher" href="https://plus.google.com/shahnuralam">
<i class="fa fa-behance"></i>
</a>
</div>
{socialNetworkContract.posts.map((p, index) => {
return <tr key={index}>
{p.message}
{p.replies}
</tr>})}
</div>
</div>
)
}
export default withRouter(Member);
My routes.js
const Routes = (props) => {
return (
<Switch>
<Route path="/member" exact component={Member} />
<Route path="/profile" exact component={Profile} />
</Switch>
)
}
export default Routes
const Routes=(道具)=>{
返回(
)
}
导出默认路由
html按钮和在原始组件上调用的函数是
const getProfile = async (member) => {
const addr = dispatch({ type: 'ADD_MEMBER', response: member })
console.log(member)
history.push('/member')
}
<button onClick={() => getProfile(p.publisher)}>Profile</button>
const getProfile=async(成员)=>{
const addr=dispatch({type:'ADD_MEMBER',response:MEMBER})
console.log(成员)
history.push(“/member”)
}
getProfile(p.publisher)}>Profile
const getProfile = async (member) => {
const addr = dispatch({ type: 'ADD_MEMBER', response: member })
console.log(member)
history.push('/member')
}
<button onClick={() => getProfile(p.publisher)}>Profile</button>