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


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进去吗

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>
    )
  }
}