时间戳

首页 > 解决方案 > React App 在两个地方使用相同的函数，但 API 调用不同。我如何强制它每次都使用root？

javascript - React App 在两个地方使用相同的函数，但 API 调用不同。我如何强制它每次都使用root？

问题描述

所以我正在构建一个允许人们发表帖子和发表评论的应用程序。我遇到了一个问题，如果我在两个不同的地方使用相同的 addLikes 和 unLike 函数，第二个不起作用。

这是我的动作/控制器文件中的函数。

export const addLike = (id) => async (dispatch) => {
  try {
    const res = await axios.put(`api/posts/like/${id}`);

    dispatch({
      type: UPDATE_LIKES,
      payload: { id, likes: res.data },
    });
  } catch (err) {
    dispatch({
      type: POST_ERROR,
      payload: { msg: err.response.statusText, status: err.response.status },
    });
  }
};

// Unlike

export const unLike = (id) => async (dispatch) => {
  try {
    const res = await axios.put(`api/posts/unlike/${id}`);

    dispatch({
      type: UPDATE_LIKES,
      payload: { id, likes: res.data },
    });
  } catch (err) {
    dispatch({
      type: POST_ERROR,
      payload: { msg: err.response.statusText, status: err.response.status },
    });
  }
};

当我在显示所有帖子从最新到最旧的页面上使用它时。API 指向：

http://localhost:3000/api/posts/like/5ebba76c42f5fc2f98ebd94b

<Fragment>
      <div className='post bg-white p-1 my-1'>
        <div>
          <Link to={`/profile/${user}`}>
            <img className='round-img' src={avatar} alt='' />
            <h4>{name}</h4>
          </Link>
        </div>
        <div>
          <p className='my-1'>{text}</p>
          <p className='post-date'>
            Posted on <Moment format='YYYY/MM/DD'>{date}</Moment>
          </p>
          <button
            onClick={(e) => addLike(_id)}
            type='button'
            className='btn btn-light'
          >
            <i className='fas fa-thumbs-up'></i>{" "}
            <span>{likes.length > 0 && <span>{likes.length}</span>}</span>
          </button>
          <button
            onClick={(e) => unLike(_id)}
            type='button'
            className='btn btn-light'
          >
            <i className='fas fa-thumbs-down'></i>
          </button>
          <Link to={`/posts/${_id}`} className='btn btn-primary'>
            Discussion{" "}
            {comments.length > 0 && (
              <span className='comment-count'>{comments.length}</span>
            )}
          </Link>
          {!auth.loading && user === auth.user._id && (
            <button
              onClick={(e) => deletePost(_id)}
              type='button'
              className='btn btn-danger'
            >
              <i className='fas fa-times'></i>
            </button>
          )}
        </div>
      </div>
    </Fragment>

然后，我目前正在构建片段以显示单个帖子，并且 API 将指向：

http://localhost:3000/posts/api/posts/like/5ebba76c42f5fc2f98ebd94b

      <div className='post bg-white p-1 my-1'>
        <div>
          <Link to={`/profile/${user}`}>
            <img className='round-img' src={avatar} alt='' />
            <h4>{name}</h4>
          </Link>
        </div>
        <div>
          <p className='my-1'>{text}</p>
          <p className='post-date'>
            Posted on <Moment format='YYYY/MM/DD'>{date}</Moment>
          </p>
          <button
            onClick={(e) => addLike(_id)}
            type='button'
            className='btn btn-light'
          >
            <i className='fas fa-thumbs-up'></i>{" "}
            <span>{likes.length > 0 && <span>{likes.length}</span>}</span>
          </button>
          <button
            onClick={(e) => unLike(_id)}
            type='button'
            className='btn btn-light'
          >
            <i className='fas fa-thumbs-down'></i>
          </button>
        </div>
      </div>
    </Fragment>

这两个位置是：

              <PrivateRoute exact path='/posts' component={Posts} />
              <PrivateRoute exact path='/posts/:id' component={Post} />

如何强制相同的功能每次都使用相同的确切路径？我不确定为什么第二种情况会在 api/ 前面添加额外的 /posts

标签： javascriptnode.jsreactjsreact-redux

解决方案

您必须为 Axios 请求设置和配置默认的基本 URL。

例如：

// Axios configuration
axios.defaults.baseURL = "https://example.com/";

现在，每当您提出请求时，它都会自动为您的每个请求添加此默认 baseURL 的前缀。

喜欢：axios.put(api/posts/like/${id})到axios.put(https://example.com/api/posts/like/ ${id});

推荐阅读