如何在Redux中通过单击按钮改变减速器状态？

falq053o 于 2022-11-24 发布在其他

关注(0)|答案(2)|浏览(141)

我试图使一个个人网页的名称和其他信息，当你点击编辑个人资料按钮，它会带你到另一个页面编辑信息。
在“编辑个人资料”页面上，我在输入表单上输入了信息，您可以在其中输入新信息。我希望只有在单击“保存”按钮时，信息才会反映出更改。如果我不单击“保存”按钮，而是单击“X”按钮，则返回“个人资料”页面时，信息不会发生更改。
我不确定我做错了什么，但现在，无论我是否单击“保存按钮，它都会改变。有人能帮我找出我做错了什么吗？我已经做了几个小时了，我仍然不能找出我做错了什么。
下面是我的代码：
profile-reducers.js

const profileReducer = (state = profile, action) => {
    switch (action.type) {
        case 'edit-profile':
            state[0].name = action.name;
            return state;

        default:
            return state;
    }
}

export default profileReducer;

edit-profile.js

const EditProfileItem = () => {
    let profile = useSelector(state => state.profile[0]);
    const [name, setname] = useState(profile.name);
    
    const dispatch = useDispatch();
    const editProfileClickHandler = () => {
        dispatch({
            type: 'edit-profile',
            name: name,      
        });
    }

    return (
      <>
        <div className = 'row p-2'>
            <div className = 'float-start col-1'>
                <Link to='/tuiter/profile'>
                    <i className = 'fas fa-times icon' style={{color:'black'}}/>
                </Link>
            </div>
            <div className='col-5 text-black fw-bold'>
                Edit Profile
            </div>
            <div className = 'col-6'>
                <Link
                    className='btn rounded-pill bg-black float-end text-white fw-bold'
                    to='/tuiter/profile'
                    onClick={editProfileClickHandler()}
                > Save
                </Link>
            </div>
        </div>

        <div className = 'pt-3'>
            <ul className='list-group'>
                <li className='list-group-item'>
                    <label className='text-secondary'>Name</label>
                    <input
                        className='form-control border-0 p-0'
                        defaultValue={profile.name}
                        onChange={(event) => setname(event.target.value)}/>
                </li>
            </ul>
       </div>
   </>
};
export default EditProfileItem;

redux

来源：https://stackoverflow.com/questions/74323971/how-to-change-reducer-state-change-with-the-button-click-in-redux

2条答案

按热度按时间

voj3qocg1#

个问题

EditProfileItem正在呈现一个链接，其中onClick处理程序的回调函数在组件呈现时立即被调用。它应该作为回调函数传递，以便以后在实际单击时调用。

onClick={editProfileClickHandler}而不是onClick={editProfileClickHandler()}

profileReducer应改变state***或***返回新的state值，但不能同时改变两者。
应该使用name状态和value属性而不是defaultValue属性来完全控制input。

溶液

const EditProfileItem = () => {
  const profile = useSelector(state => state.profile[0]);
  const [name, setName] = useState(profile.name);
    
  const dispatch = useDispatch();

  const editProfileClickHandler = () => {
    dispatch({
      type: 'edit-profile',
      payload: name,      
    });
  };

  return (
    <>
      <div className='row p-2'>
        <div className='float-start col-1'>
          <Link to='/tuiter/profile'>
            <i className='fas fa-times icon' style={{ color: 'black' }} />
          </Link>
        </div>
        <div className='col-5 text-black fw-bold'>
          Edit Profile
        </div>
        <div className='col-6'>
          <Link
            className='btn rounded-pill bg-black float-end text-white fw-bold'
            to='/tuiter/profile'
            onClick={editProfileClickHandler}   // <-- pass callback reference
          >
            Save
          </Link>
        </div>
      </div>

      <div className = 'pt-3'>
        <ul className='list-group'>
          <li className='list-group-item'>
            <label className='text-secondary'>Name</label>
            <input
              className='form-control border-0 p-0'
              value={name}                     // <-- use value prop
              onChange={(event) => setName(event.target.value)}
            />
          </li>
        </ul>
      </div>
    </>
  );
};

轮廓缩减器
由于这看起来不是redux工具包的切片reducer，我假设它是一个遗留redux reducer函数。

const profileReducer = (state = profile, action) => {
  switch (action.type) {
    case 'edit-profile':
      const nextState = state.slice();
      nextState[0] = {
        ...nextState[0],
        name: action.payload
      };
      return nextState;

    default:
      return state;
  }
};

赞(0）回复(0）举报 2022-11-24

cbjzeqam2#

onClick = {编辑配置文件单击处理程序（）}
在这一行中，您在每次渲染时都调用函数，需要将函数传递到onClick处理程序中，而不是函数的返回值
它应该是onClick ={（）=〉编辑配置文件单击处理程序（）}
在这里，一个函数被传递到onClick中，当有一个click事件发生时，就会调用这个函数
我希望这能帮上忙

赞(0）回复(0）举报 2022-11-24

我来回答

如何在Redux中通过单击按钮改变减速器状态？

2条答案

个问题

溶液

相关问题

热门标签

最新问答