如何在React事件的点击事件中批准按钮显示

Question

当我单击“待处理”按钮时，状态不会随着此代码而更改，并显示消息

TypeError: this.state.data.map is not a function

请帮助我！

class App extends Component {


  constructor(props) {

    super(props);
    this.state = {
      data: [
        {
          id: 1,
          name: "farid",
          age: 15,
          status: "pending"
        },
        {
          id: 2,
          name: "kamal",
          age: 15,
          status: "pending"
        }
      ],

    }

  }
   movementappTDClick = (id) => () => {

    const index = this.state.data.findIndex((data) => {
      return data.id === id
    })
    let data = Object.assign({}, this.state.data[index]);
    console.log('data is', data);
    data.status = "approved"
    console.log("sec data is", data);
    this.setState({ data });
  };
  render() { 

    return (
      <div className="App">
        <Card>
          <CardBody>
            <Table>
              <thead>
                <tr>
                  <th>ID</th>
                  <th>name</th>
                  <th>age</th>
                </tr>
              </thead>
              <tbody>
                {this.state.data && this.state.data.map(movement => (
                  <tr key={movement.id}>
                    <th>{movement.id}</th>
                    <td>{movement.name}</td>
                    <td>{movement.age} </td>
                    <td>
                      <button
                        onClick={this.movementappTDClick(movement.id)}
                      >
                        {movement.status}
                      </button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </Table>
          </CardBody>
        </Card>
      </div>
    );
  }
}

Answer 1

尝试修改您的movementappTDClick函数。

movementappTDClick = index => {
    const data = [...this.state.data];
    const row = data[index];
    row.status = "approved";

    data.splice(index, 1, row);
    this.setState({ data });
  };

  render() {
    return (
      <div className="App">
        <Card>
          <CardBody>
            <Table>
              <thead>
                <tr>
                  <th>ID</th>
                  <th>name</th>
                  <th>age</th>
                </tr>
              </thead>
              <tbody>
                {this.state.data &&
                  this.state.data.map((movement, index) => (
                    <tr key={movement.id}>
                      <th>{movement.id}</th>
                      <td>{movement.name}</td>
                      <td>{movement.age} </td>
                      <td>
                        <button onClick={() => this.movementappTDClick(index)}>
                          {movement.status}
                        </button>
                      </td>
                    </tr>
                  ))}
              </tbody>
            </Table>
          </CardBody>
        </Card>
      </div>
    );
  }
}

Answer 2

我修改了您的代码。请检查一下。

class App extends Component {


  constructor(props) {

    super(props);
    this.state = {
      data: [
        {
          id: 1,
          name: "farid",
          age: 15,
          status: "pending"
        },
        {
          id: 2,
          name: "kamal",
          age: 15,
          status: "pending"
        }
      ],

    }

  }
   movementappTDClick = (index) => () => {
const { data } = this.state;
data[index] = {
  ...data[index],
  status: 'approved'
}
this.setState({ data }); };

  render() { 
const { data } = this.state;
    return (
      <div className="App">
        <Card>
          <CardBody>
            <Table>
              <thead>
                <tr>
                  <th>ID</th>
                  <th>name</th>
                  <th>age</th>
                </tr>
              </thead>
              <tbody>
                {data && _.map((data || []), (movement, index) => (
                  <tr key={movement.id}>
                    <th>{movement.id}</th>
                    <td>{movement.name}</td>
                    <td>{movement.age} </td>
                    <td>
                      <button
                        onClick={this.movementappTDClick(index)}
                      >
                        {movement.status}
                      </button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </Table>
          </CardBody>
        </Card>
      </div>
    );
  }
}