时间戳

首页 > 解决方案 > 我的反应组件在不应该的时候不断重定向到另一个组件（反应和redux）

javascript - 我的反应组件在不应该的时候不断重定向到另一个组件（反应和redux）

问题描述

我有一个组件，它遍历对象数组并为每个对象呈现一个按钮。单击按钮时，它会调用一个函数，该函数重定向到另一个组件并在迭代中调度该对象的状态。问题是，只要我转到原始组件，页面就会重定向到另一个组件，而无需我单击按钮。

这是遍历数组并呈现按钮的组件

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

  const getProfile = async (member) => {
    dispatch({ type: 'ADD_MEMBER', response: member })
    window.location.href='/member'
    console.log('----------- member------------')
    console.log(post)
  }

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

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

          <Card border="info" >
  <Card.Header as="h5">Publisher: {p.publisher}</Card.Header>
  <Card.Body>
    <Card.Title>{p.message}
</Card.Title>
    <Card.Text>
        {p.image}
        <Accordion defaultActiveKey="0">
      <Accordion.Toggle as="button" variant="link" eventKey="0">
        View Replies!
      </Accordion.Toggle>
          <Accordion.Collapse eventKey="0">
      <Card.Body>          
<p>-- {p.replies}</p>
</Card.Body>
    </Accordion.Collapse>
</Accordion>

    <form onSubmit={mySubmitHandler} style={{ textAlign: 'center' }} name='post' value={p.postsCounter}>

          <div style={{ padding: '10px' }} >
            <input
              type='text'
              name='reply'
              onChange={myChangeHandler}
              required
            /></div>

    <input type='submit' value="Reply" />
    </form>
    
    <button onClick={getProfile(p.publisher)}>Profile</button>    
    <button variant="primary" onClick={Like}>Like</button>
    <button variant="primary"onClick={disLike}>Dislike</button>
    
    </Card.Text>
  </Card.Body>
</Card>

        </tr>})}
   </div>
  )
}

export default Posts;

这就是我的 socialNetworkContract 减速器的样子

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
    }
};

为简洁起见，我将所有其他功能和状态等排除在组件之外。

标签： javascriptreactjsredux

解决方案

改变这个

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

对此

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

推荐阅读