在反應中選擇不反映狀態變化

Question

當我嘗試在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中不會進行任何更改，因此選擇框不會顯示已更新的選擇，但是我可以清楚地看到狀態已更新。 為什么更改未反映在選擇框中。

任何想法？

Answer 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);
};

Answer 2

select上的值應該是options標記上的值之一，但是作為這些選項上的值，您正在映射主題，但是在select標記上設置了value={this.state.displayName} ？ 如果您將其替換為value={this.state.topic} ，它將使用相同的數據映射，因此它將起作用。 這是一個codesandbox exp。

Answer 3

將setState設置為displayName的值更改為

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

因為value屬性應該具有所選option的值