我的 React 组件中有以下代码：
<select
className="input form-control"
onChange={this.onUserChanged}
value={task.user_id}>
<option value=''></option>
{this.renderUserOptions()}
</select>
当 task.user_id 在组件的第一次渲染时为 null 时，选择正确显示为空选项和 value ''。
但是，如果我将值从具有值的值更改回默认选项，服务器端会正确更新，任务对象返回nullfortask.user_id但选择不会更改为默认值。
我应该怎么做来处理这种情况？
为您的选择组件设置值时，您必须转换null为''; 并且当从您的组件接收值时，您必须将其转换''为null. 一个简单的例子：
class Example extends React.Component {
constructor(props) {
super(props);
this.state = { selected: null };
}
render() {
return <div>
<select
className="input form-control"
onChange={e => this.setState({ selected: e.target.value || null })}
value={this.state.selected || ''}>
<option value=''></option>
<option value='1'>cook dinner</option>
<option value='2'>do dishes</option>
<option value='3'>walk dog</option>
</select>
<input type='button' onClick={() => this.setState({ selected: null })} value='Reset' />
</div>
}
}
假设您的 id 始终为真，这e.target.value || null将起作用：将所选的空字符串转换为null; 并且this.state.selected || ''将您的转换null状态为空字符串。如果您的 id 可能是假的（例如 number 0），您将需要更强大的转换。
我认为您的问题可能是由这一行引起的：
value={task.user_id}
无论选择什么，选择将始终显示为一个值。
如果您的 onUserChanged 函数是正确的，您应该会在服务器或控制台上看到正确的值，但客户端将始终看到该 task.user_id。
否则，您的代码中的其他一切似乎都是正确的。