Что-то не так с моим классом реакции? - PullRequest
Новая
       11

Что-то не так с моим классом реакции?

0 голосов
/ 14 января 2019

Я тренируюсь, используя реакцию, чтобы построить простую таблицу. Здесь моя таблица имеет три столбца. (имя, должность, удалить). В таблице уже есть некоторые данные. В третьем столбце я хочу создать кнопку, чтобы пользователь мог щелкнуть и отменить всю строку

Я уже исправил несколько ошибок, но таблица по-прежнему не отображается 

const TableBody = props => { 
    const rows = props.fillTheData.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>;
}

class App extends React.Component {
  render() {
    const state = {
      character : [
              {
                  'name': 'Charlie',
                  'job': 'Janitor'
              },
              {
                  'name': 'Mac',
                  'job': 'Bouncer'
              },
              {
                  'name': 'Dee',
                  'job': 'Aspring actress'
              },
              {
                  'name': 'Dennis',
                  'job': 'Bartender'
              }
      ]
    }

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

        this.setState({
          character: character.filter((element, i) => { 
              return i !== index;
          })
      });
    }

    return(

        <Table characters = {character} removeCharacter = {this.removeCharacter} />

    )
  }
}

class Table extends React.Component {
  render(){
    const {characters, removeCharacter} = this.props;
    return(
      <table>
        <TableHeader />
        <TableBody fillTheData = {characters} removeCharacter= {removeCharacter} />
      </table>
    )
  }
}

Прямо сейчас у нас есть классный компонент Table, но данные жестко закодированы. Одно из главных преимуществ React - это то, как он обрабатывает данные, и делает это со свойствами, называемыми реквизитами, и с состоянием. Во-первых, мы сосредоточимся на обработке данных с помощью реквизита.

Затем давайте переместим все эти данные в массив объектов, как если бы мы вводили API на основе JSON. Нам нужно создать этот массив внутри нашего render ().

Ответы [ 2 ]

0 голосов
/ 14 января 2019

Похоже, ваша state является локальной переменной, а не постоянными данными компонента App. Попробуйте что-то вроде этого: 

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

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

        this.setState({
            character: character.filter((element, i) => { 
                return i !== index;
            });
        });
    }

    render() {
        return(
            <Table characters = {this.state.character} removeCharacter = {this.removeCharacter} />
        )
    }
}

Обратите внимание, что мы определили state={character: [...]}; вне метода render (), и позже используем characters = {this.state.character}, чтобы прочитать его обратно. Теперь, когда вызывается метод removeCharacter (), он изменяет данные, существующие вне метода render ().

0 голосов
/ 14 января 2019

Кажется, вы не рендерили компонент приложения. Для этого вам нужно импортировать метод render из библиотекиactDOM. Так что в верхней части файла у вас будет что-то вроде:

import React from 'react'; import ReactDOM from 'react-dom';

В конце файла вы визуализируете экземпляр приложения с: ReactDOM.render(nodeWhereYouWillMount,<App />)

...