reactjs - ReactJS instance.render 不是函数
问题描述
我正在尝试学习 ReactJS 并遵循本指南:https ://www.taniarascia.com/getting-started-with-react/ 但我的状态部分有问题,我无法继续。
在 App.js 我写道:
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: 'Aspring actress',
},
{
name: 'Dennis',
job: 'Bartender',
},
],
}
removeCharacter = (index) => {
const {characters} = this.state
this.setState({
characters: characters.filter((character, i) => {
return i !== index
}),
render() {
const { characters } = this.state
return (
<div className="container">
<Table characterData={characters} removeCharacter={this.removeCharacter} />
</div>
)
}
})
}
}
export default App
并在 TABLE.JS 中
import React from 'react'
const TableHeader = () => {
return (
<thead>
<tr>
<th>Name</th>
<th>Job</th>
</tr>
</thead>
)
}
const TableBody = (props) => {
const rows = props.characterData.map((row, index) => {
console.log(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 Table extends Component {
render() {
// const {characterData} = this.props
// return (
// <table>
// <TableHeader />
// <TableBody characterData={characterData} />
// </table>
// )
const Table = (props) => {
const {characterData, removeCharacter} = props
return (
<table>
<TableHeader />
<TableBody characterData={characterData} removeCharacter={removeCharacter} />
</table>
)
}
}
export default Table
所以结果是: TypeError: instance.render is not a function 提前谢谢谁会回答我
解决方案
重构的工作代码
应用程序.js
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: "Aspring actress",
},
{
name: "Dennis",
job: "Bartender",
},
],
};
removeCharacter = (index) => {
const { characters } = this.state;
this.setState({
characters: characters.filter((character, i) => {
return i !== index;
}),
});
};
render() {
const { characters } = this.state;
return (
<div className="container">
<Table
characterData={characters}
removeCharacter={this.removeCharacter}
/>
</div>
);
}
}
export default App;
表.js
import React from "react";
const TableHeader = () => {
return (
<thead>
<tr>
<th>Name</th>
<th>Job</th>
</tr>
</thead>
);
};
const TableBody = (props) => {
const rows = props.characterData.map((row, index) => {
console.log(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 Table extends React.Component {
render() {
const Table = () => {
const { characterData, removeCharacter } = this.props;
return (
<table>
<TableHeader />
<TableBody
characterData={characterData}
removeCharacter={removeCharacter}
/>
</table>
);
};
return (
<div>
<Table />
</div>
);
}
}
export default Table;
推荐阅读
- angular - Ngx-bootstrap 的无线电组在加载时不会绑定到选定的值
- c# - 如何在标记后提取字符串?
- javascript - 如果不是 m=> m>n 的意思,这个函数是否使用箭头函数
- kubernetes - 从 Kubernetes pod 内部访问外部数据库的微服务
- angular - 无法在 getCurrentPosition 函数上获取简单成功回调的坐标
- jquery - 单击表单中的按钮输入时如何更改谷歌地图
- node.js - 我们如何对 mongodb 集合中的文档字段进行排序?
- spring - 如何使用 .yml 在 zuul 中避免超时异常
- java - 使用 Redis 对多个容器进行休眠 2 级缓存
- python - Keras Multi_GPU_Model:像糖蜜一样慢