react的问题 怎么修改数组里每个人的状态

Question

import React, { Component } from 'react'

export default class Zuoye extends Component {
    state={
       students:[
        {id:1,name:'张三',isStudent:true},
        {id:2,name:'李四',isStudent:false},
        {id:3,name:'王五',isStudent:true},
        {id:4,name:'赵六',isStudent:false},
        {id:5,name:'陈七',isStudent:true},
      ]
    }
    change=()=>{
            
    }
  render() {
    return (
      <div>
        <table>
          <thead>
            <tr>
              <td>编号</td>
              <td>姓名</td>
              <td>是否学生</td>
              <td>操作</td>
            </tr>
          </thead>
          <tbody>
          {
                this.state.students.map(item=>{
                  return <tr key={item.id}>
                    <td>{item.id}</td>
                    <td>{item.name}</td>
                    <td>{item.isStudent==true?'是':'否'}</td>
                    <td>
                    <button onClick={()=>this.change()}>改变状态</button>
                    </td>
                  </tr>
                })
              }
          </tbody>
        </table>
      </div>
    )
  }
}

点击事件里怎么写才能修改isStudent的值 this.change需要传item.isStudent进去吗

Answer 1

ChatGPT尝试为您解答，仅供参考
为了能够修改对应人的状态，你需要在按钮的点击事件处理函数 change 中传入当前人的信息，然后在 change 函数中找到对应的人并修改他的状态。

---

具体实现方式如下：

change=(student)=>{
  // 找到对应的人
  let students = this.state.students.map(item=>{
    if(item.id === student.id){
      item.isStudent = !item.isStudent;
    }
    return item;
  });
  // 修改状态
  this.setState({
    students
  });
}

然后在渲染表格的时候，将当前人的信息作为参数传给 change 函数：

<button onClick={()=>this.change(item)}>改变状态</button>

这样，你就可以单独修改每个人的状态了。

---

注意：在修改状态时，你应该使用 setState 方法来修改状态，而不是直接修改状态对象。这是因为在 React 中，组件的状态是不能直接修改的，必须使用 setState 方法来修改状态。

---

最终的代码应该是这样的：

import React, { Component } from 'react'
export default class Zuoye extends Component {
    state={
       students:[
        {id:1,name:'张三',isStudent:true},
        {id:2,name:'李四',isStudent:false},
        {id:3,name:'王五',isStudent:true},
        {id:4,name:'赵六',isStudent:false},
        {id:5,name:'陈七',isStudent:true},
      ]
    }
    change=(student)=>{
        // 找到对应的人
      let students = this.state.students.map(item=>{
        if(item.id === student.id){
          item.isStudent = !item.isStudent;
        }
        return item;
      });
      // 修改状态
      this.setState({
        students
      });
    }
  render() {
    return (
      <div>
        <table>
        <thead>
            <tr>
              <td>编号</td>
              <td>姓名</td>
              <td>是否学生</td>
              <td>操作</td>
            </tr>
          </thead>
          <tbody>
          {
                this.state.students.map(item=>{
                  return <tr key={item.id}>
                    <td>{item.id}</td>
                    <td>{item.name}</td>
                    <td>{item.isStudent==true?'是':'否'}</td>
                    <td>
                    <button onClick={()=>this.change(item)}>改变状态</button>
                    </td>
                  </tr>
                })
              }
          </tbody>
        </table>
      </div>
    )
  }
}