当我在 react 中设置 useState 时，它​​不会更新状态

Question

我需要使用反应路由器渲染一个具有路由的组件。第一个组件有一个按钮，单击该按钮时需要呈现另一个组件，该组件具有从第一个组件传入的状态。页面重定向但不加载。我想要的第一个组件的所有数据都被传入，但是当我使用 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

将dispatch({ type: 'ADD_MEMBER', response: member }) 与来自post 的publisher 属性的member 对象结合使用没有任何意义。该信息已经在您所在的州。您可能需要更好地normalizing your state，以便您可以在需要的地方选择它。

---

您想使用 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]);