反应下拉/选择不更新状态

Question

如果我尝试更新的状态在用户数组之外，则更新状态有效。但是由于我有多个用户，所以我需要将状态放在对象内部并无论如何都要更新

我不断收到错误TypeError: Cannot read property 'name' of undefined

我曾想过在循环内设置状态，但有人告诉我这是个坏主意。

所以[e.target.name]: e.target.value 是我能找到的唯一下拉代码。

我尝试为每个用户传递 id，但不知道如何使用它来更改状态或放置什么条件。

import React, { Component } from 'react'
export default class App extends Component {

  state = {
    users: [
      {
        id: uuid(),
        firstName: 'John',
        lastName: 'Doe',
        favColor: 'None'
      },
      {
        id: uuid(),
        firstName: 'Jane',
        lastName: 'Doe',
        favColor: 'None'
      }
    ]
  }

  handleChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value
    })
  }

  render() {

    return (
      <div>
        {this.state.users.map((user) => {

          return <div key={user.id}>

            <h1>{user.firstName}</h1>
            <h1>{user.lastName}</h1>

            <form>
              <select 
                  name="favColor" 
                  value={user.favColor} 
                  onChange={() => this.handleChange(user.id)}
              >
                <option value="None" disabled>None</option>
                <option value="Blue">Blue</option>
                <option value="Red">Red</option>
                <option value="Green">Green</option>
              </select>
            </form>

            <h1>Fav Color: {user.favColor}</h1>
            <hr />
          </div>
        })}
      </div>
    )
  }

}

我希望下拉菜单为每个用户单独更改状态

Answer 1

您以错误的方式更新状态；

您所在的州：

users: [
    { id: 1, ... },
    { id: 1, ... }
]

您的更新/意图：

users: [
    { id: 1, ... },
    { id: 1, ... }
]
favColor: color // intention, because you don’t pass event

要以正确的方式更新，您需要：

• 将所选下拉列表的事件和 currentId 传递给 handleChange。否则你无法知道当前用户。此外，在您的示例中，您没有传递事件，因此您无法检索下拉列表的信息。导致名称未定义的错误。
• 检查用户 id 何时与下拉列表的 id 匹配并更改值。

这个例子应该适合你。

https://codesandbox.io/s/small-sea-mw08n

Answer 2

您的handleChange 方法不接受正确的参数。 如果您希望更新数组中的一个用户项，您需要创建一个新的更新后的数组副本并保存回状态

handleChange = (e,id) => {
const updatedUser = {...this.state.users.find(x=>x.id ===id), favColor: e.target.value}
 this.setState({
    users:  [...this.state.users.filter(x==>x.id!==id),updatedUser]
    })
}

...
onChange={(e) => this.handleChange(e,user.id)}

为了简化状态突变，我建议您查看Immer

正如@JosephD 正确指出的那样，这不会维持秩序，因此您需要执行this.state.users.map(u => u.id === id ? { ...u, favColor: e.target.value } : u) 之类的操作

这是一个基于您的代码的代码框： https://codesandbox.io/s/loving-cohen-do56l?fontsize=14

Answer 3

  <select 
     name="favColor" 
     value={this.state.favColor} 
     onChange={(e) => this.handleChange(e)}>  // first Change

 handleChange = (e) => {
    this.setState({
     favColor: e.target.value 
    })
  } // Second Change

这对你有用