Question

这就是我的index.js：

    import React, { Component } from 'react';
    import ReactDOM from 'react-dom';
    import App from './App';
    import './index.css';

    ReactDOM.render(<App />, document.getElementById('root'));

我创建了2个源文件table.js和application.js

这是我的table.js（在这里我通过了removeCharacter方法）：

    import React, { Component } from 'react';

    class Table extends Component{

      render() {
        const { characterData, removeCharacter } = this.props;
        return(
          <table>
            <TableHeader />
            <TableBody 
              characterData={characterData}
              removeCharacter={removeCharacter} 
            />
          </table>
        );
      }
    }

    const TableHeader = () => {
      return (
        <thead>
          <tr>
            <th>Name</th>
            <th>Job</th>
          </tr>
        </thead>
      )
    }

    const TableBody = props => {
      const rows = props.characterData.map((row, index) =>{
        return (
          <tr key={index}>
            <td>{row.name}</td>
            <td>{row.job}</td>
            <td><button onClick={() => props.removeCharacter(index)}>Delete</button></td>
          </tr>
        );
      });

      return <tbody>{rows}</tbody>
    }
   export default Table;

在我的App.js上，我试图实现状态以添加删除方法removeCharacter。正如我要遵循的教程所说，我只需要将所有数组对象移到该“状态”块中即可。

    import React, { Component } from 'react';
    import Table from './Table';

    class App extends Component {
      state = {
        characters: [
          {
            'name': 'Charlie',
            'job': 'Janitor'
          },
          {
            'name': 'Mac',
            'job': 'Bouncer'
          },
          {
            'name': 'Dee',
            'job': 'Aspiring actress'
          },
          {
            'name': 'Dennis',
            'job': 'Bartender'
          }
        ]
      };

      removeCharacter = index => {
        const { characters } = this.state;

        this.setState({
          characters: characters.filter((character, i) => {
            return i !== index;
          })
        });
      }
      render()  {
        const characters = [
          {
            'name': 'Charlie',
            'job': 'Janitor'
          },
          {
            'name': 'Mac',
            'job': 'Bouncer'
          },
          {
            'name': 'Dee',
            'job': 'Aspiring actress'
          },
          {
            'name': 'Dennis',
            'job': 'Bartender'
          },
        ];
        return(
          <div className="container">
            <Table 
              characterData={characters}
              removeCharacter={this.removeCharacter} 
            />
          </div>
        );
      }
    }

    export default App;

当我单击删除按钮时，没有任何反应。

Answer 1

在App.js渲染方法中，字符常量应像这样引用状态，因为removeCharacter方法正在更改状态，而render方法中的字符变量是静态定义的。

render()  {
    const { characters } = this.state;

    return(
      <div className="container">
        <Table 
          characterData={characters}
          removeCharacter={this.removeCharacter} 
        />
      </div>
    );
  }

单击删除按钮reactjs时没有任何反应

1 个答案: