react中的select不反映状态变化答案

【问题标题】：Select in react does not reflect the state changesreact中的select不反映状态变化
【发布时间】：2018-06-15 11:24:08
【问题描述】：

当我尝试在 reactjs 中选择时发生了一些奇怪的事情。这是我的代码：

onDropDownChange=(e)=>{
    let val = this.props.contactUsReducer.contactUsList.filter(function(item) {
        return item.topic == e.target.value
    });
    let key= e.target.value;
    let name= e.target.name;
    console.log("key "+key+"  val: "+val[0].displayName+" name:"+name);
    this.setState(prevState => {
        return ( {...prevState, [name]:key, displayName: val[0].displayName})
    }, function () {
        console.log(this.state);
    });
}

在我的渲染中我有

<select type="select" className="text-input flex-row-right-item" onChange={this.onDropDownChange} name="topic" value={this.state.displayName}>
  {this.createSelectItems(this.props.contactUsReducer.contactUsList)}
</select>

这也是我的辅助函数：

createSelectItems=(itemsList)=> {
    let items = [];

    for (let i = 0; i < itemsList.length; i++) {
            items.push(<option key={itemsList[i].topic} value={itemsList[i].topic}>{itemsList[i].displayName}</option>);

    }
    return items;
}

现在，当我尝试更改选择框时，UI 中不会发生任何变化，因此选择框不会显示更新后的选择，但我清楚地看到状态已更新。为什么更改没有反映在选择框中。

有什么想法吗？

【问题讨论】：

您正在渲染this.props.contactUsReducer.contactUsList，这与组件的状态无关。

标签： javascript reactjs

【解决方案1】：

出于某种原因，您正在为 setState 函数提供一个函数。我个人发现复制状态并设置属性以更好地工作。

onDropDownChange = e => {
  let val = this.state.myArr.filter(function(item) {
    return item.topic === e.target.value;
  });
  let key = e.target.value;
  let name = e.target.name;
  console.log(
  "key " + key + "  val: " + val[0].displayName + " name:" + name
  );

  let prevState = { ...this.state };
  prevState[name] = key;
  prevState["displayName"] = val[0].displayName;

  this.setState({ ...this.state, prevState });
  console.log(this.state);
};

【讨论】：

函数最后两行不正确。我猜你的意思是this.setState(prevState, () => console.log(this.state))。

【解决方案2】：

在您的setState 中将值设置为 displayName，

this.setState(prevState => {
        return ( {...prevState, [name]:key, displayName: key})
    }, function () {
        console.log(this.state);
    });

因为value 属性应该具有所选option 的值

【讨论】：

【解决方案3】：

选择上的值应该是选项标签上的值之一，但作为这些选项上的值，您正在映射 topic 但您在选择标签上创建了value={this.state.displayName}？如果您将其替换为value={this.state.topic}，它将起作用，因为它使用相同的数据映射。这是codesandbox exp。

【讨论】：