React Component数据未显示

Question

我是React的新手，正在尝试编写一个程序，其中创建了3个组件：Table，Table标头和Table Body，并将Table标头和Table Body包含到Table中。 我试图使用状态传递来自App.js的数据，并尝试将其显示到Table组件中。我没有收到任何错误，但没有得到预期的结果。

这是React开发工具输出的画面：

此处显示状态具有值：

此处显示其为空，所以我想不会传递数据：

App.js：

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


class App extends Component {
  /*You can think of state as any data that should be saved and modified 
  without necessarily being added to a database – for example, 
  adding and removing items from a shopping cart before confirming your purchase.*/ 
  state={
    characters:[
      {
        'id':1,
        'name':'Smit',
        'job':'Student'
      },
      {
        'id':2,
        'name':'Tom',
        'job':'Teacher'
      },
      {
        'id':3,
        'name':'Hardee',
        'job':'Friend'
      },
      {
        'id':4,
        'name':'Dom',
        'job':'Principal'
      },
      {
        'id':5,
        'name':'Dik',
        'job':'Cleaner'
      }
    ]
  };

//to remove any data field from table using state
  removeCharacter = index => {
    //console.log(this.state);
    const { characters } = this.state;
    //console.log(characters);
//to update the state if data is modified
    this.setState({
        characters: characters.filter((character, i) => { 
            return i !== index;
        })
    });
}
  render() {
    //declared characters which will contains data to be insterted into table
    const characters=[];
    return (

      <div className="container">
             {/*Need to pass the character into table so passing it through charData variable into Table component */}
            <Table characterData={characters}
                  removeCharacter={this.removeCharacter} 
            />
      </div>

    );
  }
}

export default App;

Table.js

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>Id</th>
                <th>Name</th>
                <th>Job</th>
            </tr>
        </thead>
    );
}

const TableBody = props => { 
    //passing the props through as a parameter, 
    //and map through the array to return a table row for each object(element) in the array. 
    //This map will be contained in the rows variable, which we’ll return as an expression.
    const rows = props.characterData.map((row, index) => {
        return (
            <tr key={index}>
                <td>{row.id}</td>
                <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;

Answer 1

您要将字符声明为空数组，然后再将其传递给Table组件。在应用的render方法中声明字符的方式与在removeCharacter方法中声明字符的方式相同。

const { characters } = this.state;

所以

更改

   render() {
       //declared characters which will contains data to be insterted into table
       const characters=[];
    return (

收件人

    render() {
       //declared characters which will contains data to be insterted into table
       const { characters } = this.state;
     return (

Answer 2

这里有两件事要注意

1）您将render()内的字符设置为空数组，然后再将其传递给TableBody组件

将行替换为 const { characters } = this.state;或const characters = this.state.characters；应该解决问题

2）使用setState修改当前状态时，请使用功能性setState代替上述方法。这不是问题，而是一种更好的建议方法

    //console.log(characters);
//to update the state if data is modified
    this.setState(prevState => {
        const { characters } = prevState;
        return { characters: characters.filter((character, i) => { 
            return i !== index;
        })