Reactjs 未显示React组件数据

我是一个新手，我尝试编写一个程序，在这个程序中我创建了三个组件：表、表头和表体，并将表头和表体包含到表中。 我正在尝试使用state从App.js传递数据，并尝试将其显示到表组件中。我没有得到任何错误，但我没有得到想要的结果

以下是React-dev工具输出的结果：

此处显示状态具有值：

这里显示它是空的，所以数据没有被传递，我猜：

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;

import React，{Component}来自'React'；
导入“/App.css”；
从“./Table”导入表；
类应用程序扩展组件{
/*您可以将状态视为应该保存和修改的任何数据
不必添加到数据库中–例如，
在确认您的购买之前，从购物车中添加和删除项目。*/
陈述={
人物：[
{
“id”：1，
'name'：'Smit'，
“工作”：“学生”
},
{
“id”：2，
“姓名”：“汤姆”，
“工作”：“老师”
},
{
"id":3,，
“name”：“Hardee”，
“工作”：“朋友”
},
{
“id”：4，
'name'：'Dom'，
“工作”：“校长”
},
{
“id”：5，
“name”：“Dik”，
“工作”：“清洁工”
}
]
};
//使用状态从表中删除任何数据字段
removeCharacter=索引=>{
//console.log（this.state）；
const{characters}=this.state；
//console.log（字符）；
//在数据被修改时更新状态的步骤
这是我的国家({
characters:characters.filter（（字符，i）=>{
返回i！==索引；
})
});
}
render（）{
//声明的字符，其中包含要插入表中的数据
常量字符=[]；
返回(
{/*需要将字符传递到表中，以便通过charData变量将其传递到表组件中*/}
);
}
}
导出默认应用程序；

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;

import React，{Component}来自'React'；
类表扩展组件{
render（）{
const{characterData，removeCharacter}=this.props；
返回(
);
}
}
const TableHeader=（）=>{
返回(
身份证件
名称
工作
);
}
const TableBody=props=>{
//将道具作为参数传递，
//并通过数组进行映射，为数组中的每个对象（元素）返回一个表行。
//此映射将包含在rows变量中，我们将以表达式的形式返回该变量。
常量行=props.characterData.map（（行，索引）=>{
返回(
{row.id}
{row.name}
{row.job}
props.removeCharacter（索引）}>删除
);
});
返回{rows}；
}
导出默认表；

在将字符传递给表组件之前，将其声明为空数组。在应用程序的render方法中声明字符的方式与在removeCharacter方法中声明字符的方式相同

const { characters } = this.state;

所以

改变

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

到

---

这里有两件事需要注意

1） 在将字符传递给TableBody组件之前，在

render（）中将字符设置为空数组

将线路替换为
const{characters}=this.state
或
常量字符=此.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;
        })


正在为您的characterData道具提供一个空数组。你想把这个.St.字符传递给它。@ SmithSangHVI，也考虑更改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;
        })