javascript - 如何在反应中重定向到另一个组件并传递我在前一个组件中设置的状态？

Question

我有一个要重定向到使用反应路由器的组件。如何使用在原始组件上选择的字符串设置新组件的状态？我使用反应路由器的所有重定向都在工作，并且被重定向到的这个组件不起作用。它是一个 html 按钮，单击时应使用初始数据呈现此新组件。

const Posts = (props) => {
  const dispatch = useDispatch();


  const getProfile = async (member) => {
    console.log(member)
    props.history.push('/member', { user: 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 Posts;

这是我试图在点击时重定向到的组件。

const Member = (props)=> {  
  const [user, setUser] = useState({});
  const { state } = this.props.history.location;



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

  useEffect(async()=>{
    try {
     await setUser(state.user)
            console.log(user)
            console.log(user)

      const p = await incidentsInstance.usersProfile(state.user, { from: accounts[0] });
      const a = await snInstance.getUsersPosts(state.user, { from: accounts[0] });


    } catch (e) {
      console.error(e)
    }
  }, [])

我在控制台中收到以下错误。

TypeError: Cannot read property 'props' of undefined
Member
src/components/profiles/member.js:16
  13 | const [posts, setPosts] = useState([]);
  14 | const [snInstance, setsnInstance] = useState({});
  15 | const [accounts, setsAccounts] = useState({});
> 16 | const { state } = this.props.history.location;

标签： javascriptreactjsreact-routerreact-router-dom

Answer 1

如果您需要发送一些路由状态，则该push方法需要一个对象。

const getProfile = (member) => {
  console.log(member)
  props.history.push({
    pathname: '/member',
    state: {
      user: member,
    },
  });
  console.log('----------- member------------')
}

另外，Member是一个功能组件，所以没有this，只使用props对象。

路由状态在location道具上，而不是history对象上。

const Member = (props)=> {  
  const [user, setUser] = useState({});
  const { state } = props.location;

  // access state.user

此外，useEffect回调不能是async因为它们强制返回 Promise，解释为效果清理函数。async您应该声明一个要调用的内部函数。最重要的是，该setuser功能不是 async所以它不能被等待。

以下是我认为填充user状态和发出副作用的效果：

// update user state when route state updates
useEffect(() => {
  if (state && state.user) {
    setUser(state.user);
  }
}, [state]);

// 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] });
    } catch (e) {
      console.error(e)
    }
  }

  doEffects();
}, [user]);