Javascript 反应中的选择不反映状态更改

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

onDropDownChange=（e）=>{
让val=this.props.contactUsReducer.contactUsList.filter（函数（项）{
return item.topic==e.target.value
});
让key=e.target.value；
让name=e.target.name；
console.log（“key”+key+“val:+val[0].displayName+“name:+name”）；
this.setState（prevState=>{
返回（{…prevState，[name]：键，displayName:val[0].displayName}）
}，函数（）{
console.log（this.state）；
});
}

在我的作品中我有

{this.createSelectItems（this.props.contactUsReducer.contactUsList）}

还有我的助手函数：

createSelectItems=（itemsList）=>{
设项目=[]；
for（设i=0；i

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

---

有什么想法吗？

select上的值应该是选项标记上的值之一，但是作为这些选项上的值，您正在映射主题，但是您在select标记上设置了

value={this.state.displayName}

？ 如果将其替换为

value={this.state.topic}

，它将工作，因为它使用相同的数据映射。

---

这里是一个示例。

选择上的值应该是选项标记上的值之一，但是作为这些选项上的值，您映射的主题是，但是您在选择标记上做了

value={this.state.displayName}

？ 如果将其替换为

value={this.state.topic}

，它将工作，因为它使用相同的数据映射。

---

下面是一个示例。

出于某种原因，您正在为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);
};

---

出于某种原因，您正在为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);
};

---

将

setState

中设置为displayName的值更改为

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

---

因为

值

道具应该具有所选

选项的值

在

设置状态

中将值设置为displayName

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

---

因为

值

属性应该具有所选

选项的值

您正在呈现

此.props.contactUsReducer.contactUsList

，它与组件的状态无关。您正在呈现

此.props.contactUsReducer.contactUsList

，它与组件的状态无关状态。函数中的最后两行不正确。我猜您的意思是

this.setState（prevState，（）=>console.log（this.state））

。函数中的最后两行不正确。我猜你的意思是

this.setState（prevState，（）=>console.log（this.state））

。