useState 在 react 中设置时不会更新状态

Question

我需要使用react router来呈现一个具有路由的组件。第一个组件有一个按钮，当单击该按钮时，需要呈现从第一个组件传入状态的另一个组件。页面重定向但未加载。来自我想要的第一个组件的所有数据都被传入，但当我使用setProfile(p(时，它不会设置状态。成员组件中的所有其他console.log((都显示了我期望的所有数据，但它不会用这些数据设置状态。

import {useLocation} from "react-router-dom";
const Member = (props)=> {  
const [user, setUser] = useState({});
const [profile, setProfile] = useState({});
const [user, setUser] = useState({});
const { state } = useLocation();
const [profile, setProfile] = useState({});
const dispatch = useDispatch();
const [list, setList] = useState([]);
const [posts, setPosts] = useState([]);
const [snInstance, setsnInstance] = useState({});

// run effect when user state updates
useEffect(() => {
const doEffects = async () => {
try {
//  const p = await incidentsInstance.usersProfile(state.user, { from: accounts[0] });
//  const a = await snInstance.getUsersPosts(state.user, { from: accounts[0] });
if (state && state.user) {
setUser(state.user);
}
const accounts = await MyWeb3.getInstance().getAccounts();
setAccounts(accounts);
console.log(accounts)
const incidents = MyWeb3.getInstance().getContract(Incidents)
const incidentsInstance = await MyWeb3.getInstance().deployContract(incidents);
const sn = MyWeb3.getInstance().getContract(SocialNet)
const snInstance = await MyWeb3.getInstance().deployContract(sn);
setsnInstance(snInstance);
const pro = socialNetworkContract.members[0]
console.log(pro)
const p = await incidentsInstance.usersProfile(pro, { from: accounts[0] });
const a = await snInstance.getUsersPosts(pro, { from: accounts[0] });
console.log(a)
console.log(p)
setProfile(p)
} catch (e) {
console.error(e)
}
}
doEffects();
}, [profile, state]);
const socialNetworkContract = useSelector((state) => state.socialNetworkContract)
return (
<div class="container">
<a target="_blank">Name : {profile.name}</a>
{socialNetworkContract.posts.map((p, index) => {
return <tr key={index}>
{p.message}
</tr>})}
</div>
)
}
export default Member;

这是我想从重定向的父组件

const getProfile = async (member) => {
const addr = dispatch({ type: 'ADD_MEMBER', response: member })
console.log(member)
}

const socialNetworkContract = useSelector((state) => state.socialNetworkContract)

return (
<div>
{socialNetworkContract.posts.map((p, index) => {
return <tr key={index}>

<button onClick={() => getProfile(p.publisher)}>Profile</button>

</tr>})}
</div>
)
}
export default withRouter(Posts);

当我没有需要从它重定向的父组件传入数据的动态路由时，我就让这个组件工作。

我的routes.js看起来像

const Routes = (props) => {
return (
<Switch>
<Route path="/member" exact component={Member} /> 
<Route path="/posts" exact component={Posts} />
<Redirect exact to="/" />
</Switch>

)
}
export default Routes

这是还原剂

import { connect, useDispatch, useSelector } from "react-redux";
let init = {
posts:[],
post:{},
profiles:[],
profile:{},
members:[],
member:{}
}
export const socialNetworkContract = (state = init, action) => {
const { type, response } = action;
switch (type) {
case 'ADD_POST':
return {
...state,
posts: [...state.posts, response]
}
case 'SET_POST':
return {
...state,
post: response
}
case 'ADD_PROFILE':
return {
...state,
profiles: [...state.profiles, response]
}
case 'SET_PROFILE':
return {
...state,
profile: response
}
case 'ADD_MEMBER':
return {
...state,
members: [...state.members, response]
}
case 'SET_MEMBER':
return {
...state,
member: response
}
default: return state
}
};

Answer 1

使用来自post的publisher属性的member对象dispatch({ type: 'ADD_MEMBER', response: member })是没有任何意义的。该信息已在您所在的州中。你可能需要更好地规范你的状态，这样你就可以在需要的地方选择它

---

您希望使用react router dom中的Link组件导航到成员的配置文件页面。Route应根据URL中的id或username属性呈现正确的配置文件。重定向时不要传递数据，只需转到正确的URL即可。在Member页面上，您可以通过查找id来获取状态中的用户。

在Posts:中

<Link to={`/member/${p.publisher.id}`}><button>Profile</button></Link>

在Routes:中

<Route path="/member/:id" component={Member} />

在Member:中

const Member = () => {
const { id } = useParams();
const profile = useSelector((state) =>
state.socialNetworkContract.members.find((user) => user.id === id)
);
const dispatch = useDispatch();
useEffect(() => {
const doEffects = async () => {
if ( ! profile ) {
dispatch(loadUser(id));
}
};
doEffects();
}, [dispatch, profile, id]);