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

Posted 2023-03-07

【中文标题】React App 在两个地方使用相同的函数，但 API 调用不同。我如何强制它每次都使用root？

【英文标题】：React App Using the same function in two places but the API call is different. How do I force it to use the root everytime?

【发布时间】：2020-08-29 08:53:14

【问题描述】：

所以我正在构建一个允许人们发布帖子和离开 cmets 的应用程序。我遇到了一个问题，如果我在两个不同的地方使用相同的 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

【问题讨论】：

我认为发生的事情是当您使用相对路由时（例如“/api/.../”，axios 只会将它们添加到当前路由。如果您指定绝对路径（@987654323 @)，它应该保持一致

【参考方案1】：

您必须为 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);

【讨论】：

啊，谢谢，这是有道理的。所以我的基本路由是在根文件夹中的 server.js 中定义的：

好的，你已经定义了这些。你还在面对这个问题吗？

我发现地址前少了一个“/”。并将其添加到路由中会将其带回根目录。但现在我遇到了一个新问题。喜欢和不喜欢按钮现在正在尝试访问 localhost:3000 ，这是网站。但是我的 api 在 5000 上。这种行为不会出现在其他任何地方。我不确定是什么原因造成的。

你必须通过在 react 的 package.json 文件中添加一行代码来代理请求。

【参考方案2】：

你怎么会在addLike方法上发送一个ID。如果你正在创建一个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>

存在一些差距。您使用的是哪种路由器？ 你是如何设置 axios 的？我建议你使用npm i axios-es6-class

【讨论】：

你怎么会在 addLike 方法上发送一个 Id。如果你正在创建一个like，你不应该有它的 id。动词应该是post，而不是put。 对于 cmets，点赞数保存在一个数组中，其中包含所有点赞者的用户 ID。当有人喜欢时，我将添加到数组中或删除。所以我并没有真正创造一个喜欢。我只是更新谁喜欢它

路由 /posts/:id 不应该是准确的，因为 :id 是 dinamyc *知道了。明白了。谢谢。

likes.length > 0 && likes.length 这条线的目的是什么？ 有点乱。但这样做的原因是，如果没有赞，我不想在赞之后出现零。只有大于零的数字才会出现。我可能会做得更优雅。