时间戳

首页 > 解决方案 > 未显示反应组件数据

reactjs - 未显示反应组件数据

问题描述

我是 React 的新手，正在尝试编写一个程序，其中我创建了 3 个组件：表格、表格标题和表格正文，并将表格标题和表格正文包含在表格中。我正在尝试使用状态从 App.js 传递数据并尝试将其显示到 Table 组件中。我没有收到任何错误，但我没有得到想要的结果。

这是 React 开发工具输出的截图：

这里它表明状态具有值：

这表明状态具有价值

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

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

应用程序.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;

表.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;

标签： reactjsecmascript-6

解决方案

在将字符传递给 Table 组件之前，您将其声明为空数组。在你的应用程序的渲染方法中声明字符，就像你在 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 (

推荐阅读