时间戳

首页 > 解决方案 > 我在 React/Java 中有一个字符编码程序。一切都设置为 UTF-8，但我的一个字符显示不正确

javascript - 我在 React/Java 中有一个字符编码程序。一切都设置为 UTF-8，但我的一个字符显示不正确

问题描述

前端是 React/JS，我有以下 div：

<div>
          <Modal
            isOpen={openCfcOverlay}
            style={customStyles}
            contentLabel="modal"
          >
            <div className="download-content">
              <div id="download-title">Please make sure your Information is Correct...</div>
              <form id="download-reach-form" onSubmit={(event) => this.handleSubmit(event)}>
                  <Input
                    errorMessage='Please enter a valid Street Address'
                    error={cfcDeclaration.companyAddress1Error}
                    title="Street Address"
                    type="text"
                    name="Street Address"
                    value={typeof selectedCompany == 'undefined' ? "" : selectedCompany.streetAddress1}
                    disabled='edit'
                  />
                  <Input
                    errorMessage='Please enter a valid Street Address Cont.'
                    error={cfcDeclaration.companyAddress2Error}
                    title="Street Address Cont."
                    type="text"
                    name="Street Address Cont."
                    value={typeof selectedCompany == 'undefined' ? "" : selectedCompany.streetAddress2}
                    disabled='edit'
                  />
            </div>
          </Modal>

在 index.template.html 文件中，设置了 utf-8：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My page</title>
    <meta charset="utf-8">

但在 UI 中，“é”符号显示为“é”。

示例：Amelié = Amelié©

街道地址

它看起来像一个前端问题，但我如何在 React 中解决这个问题？

后端是Java，通过Maven完成配置。这也设置为 utf-8：

 <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>

街道地址作为 json 传递到后端：

public addressRequest(JSONObject jsonObject) {
        this.streetAddress1 = (String) jsonObject.get("streetAddress1");
        this.streetAddress2 = (String) jsonObject.get("streetAddress2");

@GET
    @PermitAll
    @Path("/download")
    @ApiOperation(value = "Get information")
    @ApiResponses(value = { @ApiResponse(code = 404, message = "not found")})

    Response exportInfo(
            @CookieParam(value = "userId") String userId,
            @CookieParam(value = "token") String token,
            @ApiParam(value = "streetAddress", required = true) @QueryParam("streetAddress") String streetAddress
    ) throws GeneralSecurityException, IOException;

但我觉得罪魁祸首是前端，因为我可以在通过开发工具检查元素时看到错误的地址名称：

<input class="input-component" type="text" name="Street Address" value="Amelié" data-reactid=".2.0.0.1.4.0.1">

而不是阿梅利埃。

如果重要的话，输入组件的 index.less ......

.input-component {
    background: #ECECEC;
    border: 2px solid #ECECEC;
    color: #000;
    display: inline-block;
    font-weight: normal;
    width: 226px;
    &.wide {
      width: 484px;
    }
}
  .input-component::-webkit-input-placeholder {
    color: @black;
    opacity: 1 !important;
  }
  .input-component:-moz-placeholder {
    color: @black;
    opacity: 1 !important;
  }
  .input-component::-moz-placeholder {
    color: @black;
    opacity: 1 !important;
  }
  .input-component:-ms-placeholder {
    color: @black;
    opacity: 1 !important;

我已经尝试了很多东西，但无法让 é 显示。我知道这是一个 utf-8 问题，因为我使用了一个将字符串转换为 utf-8 的在线工具，并且我从不正确的符号中得到了 'é'。我还可以做些什么 ？

标签： javascriptjavahtmlreactjs

解决方案

推荐阅读