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

Question

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

以下是我的actioncontroller文件中的函数。

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:3000apipostslike5ebba76c42f5fc2f98ebd94b。

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

然后，我目前正在构建用于显示单个帖子的fragment，API引导到。

http:/localhost:3000postsapipostslike5ebba76c42f5fc2f98ebd94b。

      <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前面增加额外的帖子？

Answer 1

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

例如，你必须设置和配置Axios请求的默认基本URL。

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

现在，每当你提出请求时，它会自动在你的每一个请求前加上这个默认的baseURL。

比如 axios.put(apipostslike${id}) 到 axios.put(https:/example.comapiposts like${id});

Answer 2

• 你怎么会发一个ID在 addLike 方法。如果你是创建一个like，你不应该有它的id。而且动词应该是post，而不是put。
• 路径 posts:id 不应该是精确的，因为 :id 是迪那霉素。
• <span>{likes.length > 0 && <span>{likes.length}</span>}</span> 这一行背后的目的是什么？是不是应该是。

....
render () {
....
const likes = likes.length;
return (
....
<span>{likes}</span>

• 有一些差距。你用的是什么样的Router ?
• 你是如何设置 axios 的？我建议你使用 npm i axios-es6-class