Question

如果我要更新的状态不在users数组之外，则更新状态有效。但是由于我有多个用户，所以我需要状态在对象内部并始终更新

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

我曾经考虑过在循环中设置状态，但有人告诉我那是个坏主意。

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

我尝试为每个用户传递ID，但不知道如何使用该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

您的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 2

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

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

这将为您服务

Answer 3

您以错误的方式更新状态； </ p>

您的状态：

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

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

3 个答案: