ReactJS中使用JSON.stringify()赋值下拉框出现多余双引号如何解决？

你遇到的问题核心是**完全没必要用JSON.stringify()**处理payment_term的值——它本身已经是字符串类型了，JSON.stringify()会给字符串额外包裹一层双引号，这就是下拉框显示多余引号的直接原因。

问题拆解 #

从你的代码逻辑来看：

• payment_term是从this.state.Payment_Term[0].Payment_Detail获取的，而你给<option>的value也是直接用这个值，说明它本身就是字符串格式，根本不需要再转成JSON。
• 你在<select>的value属性里写this.state.payment_terms=JSON.stringify(payment_term)，相当于把原本的"Net 30"变成了"\"Net 30\""，自然会显示带双引号的内容。

修正方案 #

直接去掉JSON.stringify()，同时把状态赋值的逻辑从JSX属性里抽出来，让代码更清晰易维护。

第一步：调整状态赋值逻辑

把原来嵌在<select>里的状态更新，移到组件的生命周期或数据处理方法里（比如componentDidMount或者专门的处理函数）：

// 示例：在组件挂载后处理付款条款数据
componentDidMount() {
  this.handlePaymentTerms();
}

handlePaymentTerms() {
  if (this.state.Payment_Term != null && this.state.Payment_Term.length > 0) {
    // 直接赋值原始字符串，不需要JSON转换
    const defaultPaymentTerm = this.state.Payment_Term[0].Payment_Detail;
    this.setState({
      payment_terms: defaultPaymentTerm
    });
  }
}

第二步：简化<select>的value属性

现在<select>的value可以简化为：

<select 
  name="payment_terms" 
  value={this.state.payment_terms || ''}
>
  {payment_terms}
</select>

用|| ''处理payment_terms未定义的情况，避免出现undefined导致的组件警告。

完整修正后的代码示例

class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      Payment_Term: [],
      payment_terms: '',
      paymentOptions: []
    };
  }

  componentDidMount() {
    this.handlePaymentTerms();
  }

  handlePaymentTerms() {
    if (this.state.Payment_Term != null) {
      const paymentOptions = [];
      for (let i = 0; i < this.state.Payment_Term.length; i++) {
        const detail = this.state.Payment_Term[i].Payment_Detail;
        if (detail != null) {
          // 给option加唯一key，符合React列表渲染规范
          paymentOptions.push(
            <option key={i} value={detail}>
              {detail}
            </option>
          );
        }
      }
      // 设置默认选中项和选项列表
      if (this.state.Payment_Term.length > 0) {
        this.setState({
          payment_terms: this.state.Payment_Term[0].Payment_Detail,
          paymentOptions
        });
      }
    }
  }

  render() {
    return (
      <select 
        name="payment_terms" 
        value={this.state.payment_terms || ''}
      >
        {this.state.paymentOptions}
      </select>
    );
  }
}

额外提醒 #

1. 不要在JSX属性里直接修改状态（比如你原来的this.state.payment_terms=xxx），必须用setState()更新状态，否则会导致组件渲染异常。
2. 列表渲染<option>时一定要加唯一的key属性，这是React的最佳实践，能避免不必要的渲染警告。

内容的提问来源于stack exchange，提问作者Karthikeyan