React登录表单报错：Cannot read property 'value' of null 求助

看起来你遇到的这个错误，通常是因为代码尝试访问一个还没挂载到DOM的元素，或者错误地直接操作DOM获取值导致的。结合你的代码和场景，我给你几个针对性的解决方案：

1. 确保表单输入框的name属性与state字段完全匹配 #

你的change方法是通过e.target.name来更新state的，所以必须保证输入框的name属性和你state里的userName、password完全一致。比如你的表单应该这么写：

<form onSubmit={this.handleSubmit}>
  <input
    type="text"
    name="userName"  // 这里必须和state的字段名一致
    value={this.state.userName}
    onChange={this.change}
    placeholder="请输入用户名"
  />
  <input
    type="password"
    name="password"  // 同样要匹配state字段
    value={this.state.password}
    onChange={this.change}
    placeholder="请输入密码"
  />
  <button type="submit">登录</button>
</form>

如果name不匹配，不仅state不会更新，还可能导致事件触发时出现意外的DOM元素引用问题。

2. 不要直接操作DOM获取输入值，改用state中的数据 #

很多新手会习惯用document.getElementById或者ref直接去DOM里拿输入值，但如果元素还没渲染完成，就会返回null，进而触发"Cannot read property 'value' of null"错误。

你的change方法已经把输入值同步到state里了，所以在登录验证时直接用this.state.userName和this.state.password就好，比如：

handleSubmit = (e) => {
  e.preventDefault();
  // 直接从state取数据，不用碰DOM
  const { userName, password, data } = this.state;
  // 这里和API返回的合法账号密码做对比
  const validUser = data.find(item => item.username === userName && item.password === password);
  if (validUser) {
    // 登录成功逻辑，比如设置token
    this.setState({ token: 'your-generated-token' });
  } else {
    alert('用户名或密码错误');
  }
}

3. 把API数据获取放在componentDidMount中 #

你需要从JSON API获取合法的用户名密码，这个操作必须放在组件挂载完成后执行，也就是componentDidMount生命周期里，避免在组件初始化时就去请求数据导致的异步问题：

componentDidMount() {
  fetch('https://api.myjson.com/bins/fyufr')
    .then(response => response.json())
    .then(apiData => {
      this.setState({ data: apiData });
      console.log('获取到合法账号数据:', apiData);
    })
    .catch(error => {
      console.error('获取API数据失败:', error);
    });
}

4. 检查是否有提前访问DOM元素的代码 #

如果你在constructor、componentWillMount这些组件还没挂载的生命周期里，写了获取DOM元素的代码（比如document.getElementById('userName').value），那肯定会报错。所有需要访问DOM的操作，都要等到组件挂载完成后再执行。

按照上面的步骤调整后，这个错误应该就能解决了。如果还有问题，可以把你完整的渲染方法和提交方法贴出来，我再帮你排查~

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