提交表单后React的setState不生效，请求排查代码问题

嘿，我一眼就发现问题所在啦！你的代码逻辑框架没问题，但表单提交时传递的值出错了，导致App组件接收不到正确的玩家名称。

错误原因 #

在AddPlayerForm的handleSubmit函数里，你写了：

props.addPlayer(e.target.value);

这里的e.target指向的是整个<form>元素，而表单本身并没有value属性，所以你实际传递给父组件的是undefined，App组件里的player状态自然不会有任何变化。

修复方法 #

你应该传递组件内部通过useState维护的value状态值（也就是输入框的实时内容），把这行代码改成：

props.addPlayer(value);

另外，作为受控组件的最佳实践，提交后最好通过更新状态来清空输入框，而不是依赖e.target.reset()（这是直接操作DOM的方式），可以在提交后加上setValue("")，这样状态和DOM会保持同步，避免出现不一致的情况。

修正后的AddPlayerForm组件代码 #

import React, { useState } from "react";
const AddPlayerForm = (props) => {
  const [value, setValue] = useState("");
  const handleValueChange = (e) => {
    setValue(e.target.value);
  };
  const handleSubmit = (e) => {
    e.preventDefault();
    // 传递正确的value状态值
    props.addPlayer(value);
    // 清空状态，输入框会自动同步清空
    setValue("");
  };
  return (
    <form onSubmit={handleSubmit}>
      <div className="form-group">
        <input 
          onChange={handleValueChange} 
          value={value} 
          className="form-control form-control-lg" 
          type="text" 
          placeholder="Add player" 
        />
      </div>
      <button className="btn btn-primary" type="submit">
        Submit
      </button>
    </form>
  );
};
export default AddPlayerForm;

这样修改后，点击提交按钮，App组件里的<h3>Player: {player}</h3>就会正确显示你输入的玩家名称啦～

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