Question

我不知道如何以id为目标的特定对象在一个setState中一起更改名称和电子邮件值。（成员将使用具有不同id的新对象）

 state = {
      groupName:"",
      members: [
          {name:"", email:"", id:uuid.v4()}
      ]
  }  


  render(){
    return(
        {this.state.members.map((member) => {
              return (
                  <div key={member.id}>
                      <TextField

                          id={member.id}
                          placeholder="Enter your name..."
                          onChange={(event) => this.handleInput(event)} />
                      <TextField

                          id={member.id}
                          placeholder="Enter your email"
                          onChange={(event) => this.handleInput(event )} 
                          />
                  </div>
              )
       })}
  )}



  handleInput = (event) => {
      const newGroup = {...this.state}
      const newElement = {...newGroup.members[event.target.id]}

      newElement[name] = event.target.value;
      newGroup.members[name] = newElement;

      this.setState({
          state : newGroup 
      })
  }

Answer 1

您需要传递字段值，以便在members对象内设置正确的元素。同样，在更新时，您可以映射成员数组并更新相应的对象，在setState中，您将传递members作为键。

 state = {
        groupName:"",
        members: [
            {name:"", email:"", id:uuid.v4()}
        ]
    }  


    render(){
      return(
          {this.state.members.map((member) => {
            return (
                <div key={member.id}>
                    <TextField
                        id={member.id}
                        placeholder="Enter your name..."
                        onChange={(event) => this.handleInput(event, "name")} />
                    <TextField
                        id={member.id}
                        placeholder="Enter your email"
                        onChange={(event) => this.handleInput(event, "email" )} 
                        />
                </div>
            )
        })}
    )}



    handleInput = (event, name) => {
        event.persist();
        this.setState(prevState => ({
            members : prevState.members.map((item) => {
              if (item.id = event.target.id) {
                  return {
                      ...item,
                      [name]: event.target.value
                  }
              } else {
                return item;
              }
           }) 
       }))
    }

Answer 2

这是因为state应该是不变的。您可以执行以下操作：

this.setState(({members})=> {
  const updateMembers = members.map(member => {
          if (member.id === event.target.id) {
              return {
                  ... member,
                  [name]: event.target.value
              }
          } 
          return member;

       }) 
  return {members: updateMembers}
})

您可以了解有关不变性here

的更多信息

setState一个Object数组，根据id相应地更新Object中的两个值

2 个答案: