React如何使用接口返回JSON数据预填充文本框及文本域

前端React表单预填充修复 #

你的接口返回值是数组结构：[{"ProdName":"Test Product","ProdDescr":"Testing"}]，当前代码仅将返回结果存入ProdInfo字段，未提取对应字段赋值给和表单绑定的ProdName、ProdDescr状态，因此表单无法显示预填充值。
修正setProdTextBoxes方法，提取数组首项的对应字段赋值：

async setProdTextBoxes() {
  // 替换为实际接口地址，拼接路由参数ProductID
  const fetchUrl = `[你的接口域名]/api/产品接口路径/${this.props.key_id}`;
  await fetch(fetchUrl)
    .then(response => response.json())
    .then(data => {
      const currentProduct = data?.[0] ?? {};
      this.setState({
        Prod_ID: this.props.key_id,
        ProdName: currentProduct.ProdName ?? '',
        ProdDescr: currentProduct.ProdDescr ?? '',
        ProdInfo: data,
        loading: false
      });
    });
}

现有handleChange方法仅支持ProdName的输入同步，需修改为通用双向绑定逻辑，同时给输入框补充对应属性：

// 通用事件处理，根据name属性匹配对应state字段
handleChange(event) {
  const { name, value } = event.target;
  this.setState({ [name]: value });
}

表单部分修正后代码：

render() {
  return (
    <div>
      <form>
        <input 
          type='text' 
          name='ProdName'
          value={this.state.ProdName}
          onChange={this.handleChange}
        />
        <textarea
          name='ProdDescr'
          rows='4'
          cols='65'
          value={this.state.ProdDescr}
          onChange={this.handleChange}
        ></textarea>
      </form>
    </div>
  );
}

后端C# WebAPI及SqlDataReader最佳实践 #

现有后端代码存在4个明确问题：

• 递归调用风险：Action方法和内部数据查询方法同名，易引发栈溢出
• 资源泄漏：SqlConnection、SqlCommand、SqlDataReader未做确定性释放，异常场景下会耗尽数据库连接池
• 二次序列化：手动将数据序列化为JSON字符串后再传入JsonResult，会导致返回结果被转义为字符串，前端无法直接解析为对象
• 代码笔误：参数赋值时引用了不存在的变量intProduct_ID，运行会抛出异常

修正后的代码符合生产环境最佳实践：

[HttpGet("{ProductID}")]
public IActionResult GetProductInfo(int ProductID)
{
    var productList = new List<Dictionary<string, object>>();
    // using块自动释放实现了IDisposable的数据库对象，无需手动调用Close/Dispose
    using (var conn = new SqlConnection(_connectionString))
    {
        // 连接在执行命令前打开即可，遵循晚开早关原则
        conn.Open();
        using (var cmd = new SqlCommand("usp_GetProdInfo", conn))
        {
            cmd.CommandType = CommandType.StoredProcedure;
            cmd.Parameters.Add("@Product_ID", SqlDbType.Int, 4).Value = ProductID;
            
            using (var reader = cmd.ExecuteReader())
            {
                while (reader.Read())
                {
                    var record = new Dictionary<string, object>();
                    for (int i = 0; i < reader.FieldCount; i++)
                    {
                        // 处理数据库NULL值，避免序列化或取值异常
                        record.Add(reader.GetName(i), reader.IsDBNull(i) ? null : reader[i]);
                    }
                    productList.Add(record);
                }
            }
        }
    }
    // 直接返回对象，框架自动完成JSON序列化，避免二次转义
    return Ok(productList);
}

SqlDataReader使用核心规范 #

• 所有数据库相关对象（连接、命令、读取器）必须放在using块中声明，即使抛出异常也能保证资源被正确回收
• 读取字段值前必须通过IsDBNull判断数据库空值，直接读取DBNull类型会抛出转换异常
• 禁止手动序列化JSON后再返回Action结果，由ASP.NET Core内置序列化器统一处理输出格式，避免出现转义问题
• 数据库连接不需要提前打开，在执行命令前打开即可，用完立刻释放，尽可能缩短连接占用时间

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