當我將它設置為反應時，useState 不會更新 state

Question

我需要使用反應路由器渲染一個具有路由的組件。 第一個組件有一個按鈕，單擊該按鈕時需要呈現另一個組件，該組件具有從第一個組件傳入的 state。 頁面重定向但不加載。 我想要的第一個組件的所有數據都已傳入，但當我使用 setProfile(p) 時，它不會設置 state。 成員組件中的所有其他 console.log() 都顯示了我期望的所有數據，但它不會使用這些數據設置 state。

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 object dispatch({ type: 'ADD_MEMBER', response: member })沒有任何意義。 該信息已經在您的 state 中。 您可能需要更好地規范您的 state以便您可以在需要的地方使用 select 它。

---

您想使用 react-router-dom 中的Link組件導航到成員的個人資料頁面。 您的Route應根據 URL 中的id或username屬性呈現正確的配置文件。 重定向時不要傳遞數據，只需將 go 傳遞到正確的 URL 即可。 在該Member頁面上，您可以通過查找id從 state 獲取用戶。

在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]);