React中API响应数据绑定输入框报错，求正确绑定方法

先分析你遇到的错误原因 #

你用原生DOM方法报错有两个核心问题：

1. document.getElementById('#jobTitle')写法错误——getElementById的参数不需要加#，正确写法是document.getElementById('jobTitle')；
2. 更关键的是，React是声明式框架，直接操作DOM不符合其设计逻辑，且容易因为组件未完成挂载、更新时机不对导致获取不到DOM元素，出现Cannot set properties of null错误。

下面是React中绑定数据的两种标准方法：

方法一：受控组件（推荐） #

通过React状态管理表单数据，状态变化自动同步到输入框，是React官方推荐的表单处理方式。

import { useState, useEffect } from 'react';

function JobForm() {
  // 初始化表单状态
  const [formData, setFormData] = useState({
    jobTitle: '',
    salary: ''
  });

  useEffect(() => {
    // 模拟API请求，替换成你的实际接口地址
    const fetchJobData = async () => {
      try {
        const response = await fetch('你的API接口地址');
        const data = await response.json();
        // 更新状态，自动同步到输入框
        setFormData({
          jobTitle: data.jobTitle,
          salary: data.salary
        });
      } catch (err) {
        console.error('API请求失败:', err);
      }
    };

    fetchJobData();
  }, []);

  // 处理输入框内容变化，维护状态同步
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
  };

  return (
    <div>
      <div className="form-group">
        <label htmlFor="jobTitle" className="form-label lbl">Job Title:</label>
        <input
          type="text"
          id="jobTitle"
          name="jobTitle"
          className="form-input"
          value={formData.jobTitle}
          onChange={handleInputChange}
        />
      </div>
      <div className="form-group">
        <label htmlFor="Salary" className="form-label lbl">Salary:</label>
        <input
          type="text"
          id="Salary"
          name="Salary"
          className="form-input"
          value={formData.salary}
          onChange={handleInputChange}
        />
      </div>
    </div>
  );
}

export default JobForm;

方法二：非受控组件（useRef） #

如果不需要双向绑定，仅需将API数据展示到输入框，可使用useRef直接操作DOM元素（需确保元素已挂载）。

import { useRef, useEffect } from 'react';

function JobForm() {
  // 创建输入框的引用
  const jobTitleRef = useRef(null);
  const salaryRef = useRef(null);

  useEffect(() => {
    const fetchJobData = async () => {
      try {
        const response = await fetch('你的API接口地址');
        const data = await response.json();
        // 确保DOM元素已挂载后再赋值
        if (jobTitleRef.current) {
          jobTitleRef.current.value = data.jobTitle;
        }
        if (salaryRef.current) {
          salaryRef.current.value = data.salary;
        }
      } catch (err) {
        console.error('API请求失败:', err);
      }
    };

    fetchJobData();
  }, []);

  return (
    <div>
      <div className="form-group">
        <label htmlFor="jobTitle" className="form-label lbl">Job Title:</label>
        <input
          type="text"
          id="jobTitle"
          name="jobTitle"
          className="form-input"
          ref={jobTitleRef}
        />
      </div>
      <div className="form-group">
        <label htmlFor="Salary" className="form-label lbl">Salary:</label>
        <input
          type="text"
          id="Salary"
          name="Salary"
          className="form-input"
          ref={salaryRef}
        />
      </div>
    </div>
  );
}

export default JobForm;

总结 #

• 优先使用受控组件，它能更好地和React的状态管理结合，便于后续扩展表单验证、提交逻辑等；
• useRef适合简单的展示场景，避免过度使用，保持React代码的声明式风格。

内容的提问来源于stack exchange，提问作者A.G.Vignesh Vicky