从表中删除行(无法读取null的属性'data')
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了从表中删除行(无法读取null的属性'data')相关的知识,希望对你有一定的参考价值。
我是Gatsbyjs和reactjs的新手,我仍然不太了解props.and状态是如何工作的。
我正在构建这个简单的应用程序,它从API和每个客户的任务列表中获取客户列表。
我正在使用Reach / Router来渲染组件。一切都按预期工作,以显示带有客户列表的表格,当我点击客户时,会显示一个新页面,显示该客户的任务列表。
现在,我正在尝试使表格可编辑。我首先尝试简单地删除一些行。这是我被困的地方。
edit
我相信我得到了Uncaught TypeError: Cannot read property 'data' of null
的错误,因为我正在尝试访问由fetch.js
类管理的数据(状态)。如何将数据(状态)传递给ClientTasks类?
---
我有以下代码
index.js
import React from "react"
import createHistory, LocationProvider from '@reach/router'
import createHashSource from '../utils/hash-source'
import ToastContainer from 'react-toastify';
import "../css/main.css"
import "../css/materialize.css"
import "../css/blackjack.css"
import '../../node_modules/react-toastify/dist/ReactToastify.css';
import NavBar from '../components/navBar'
import Main from '../components/main'
const isClient = typeof window !== 'undefined' && window;
let source
let history
if (typeof window !== `undefined` )
source = createHashSource()
history = createHistory(source)
class App extends React.Component
render()
return (
<LocationProvider history=history>
<div className="app" >
<NavBar/>
<Main/>
<ToastContainer position="bottom-right"/>
</div>
</LocationProvider>
)
export default App
main.js
import React from 'react'
import Router from "@reach/router"
import Home from '../components/home'
import Customers from './customers';
import ClientTasks from './clientTasks1';
const Main = () => (
<main className="main container">
<Router className="row">
<Home path='/'/>
<Customers path='customers'/>
<ClientTasks path="customers/tasks/:customerId"/>
</Router>
</main>
)
export Main
fetch.js
我使用此文件作为单个类组件工作,帮助我获取我正在显示的表(客户和任务)的数据。它工作正常。可能有更好的方法,但现在这就是我这样做的方式。任何指针都是受欢迎的。
import React, Component from 'react'
const axios = require('axios')
class Fetch extends React.Component
constructor(props)
super(props);
this.state =
data: null,
isLoading: true,
error: null,
;
componentDidMount()
this.setState( isLoading: true );
axios.get(this.props.url)
.then(result => this.setState(
data: result.data,
isLoading: false
))
.catch(error => this.setState(
error,
isLoading: false
));
render()
return this.props.children(this.state);
export default Fetch
Customers.js
这是我显示客户表的地方。我有每个客户的链接,并在“到达/路由器”的帮助下渲染cutomer任务表。
import React, Component from 'react'
import Link from "@reach/router"
import Fetch from './fetch'
import UploadForm from './upLoadtoS3'
import AnimatedDiv from './AnimatedDiv'
const APIURL = `https://SomeAIPURL`
let APIQuery = `customers`
const Customers = () => (
<Fetch url=APIURL + APIQuery>
( data, isLoading, error ) =>
if (!data)
return (
<div className="progress">
<div className="indeterminate"></div>
</div>)
if (error)
return <p>error.message</p>;
if (isLoading)
return (
<div className="progress">
<div className="indeterminate"></div>
</div>)
return (
<AnimatedDiv className='col m12 s12'>
<h1> Client List </h1>
<table className='highlight'>
<thead>
<tr>
<th>#</th>
<th>Client ID</th>
<th>Status</th>
</tr>
</thead>
<tbody>
data.map((customer, i) => (
<tr key=customer.customerid>
<td>i + 1</td>
<td>
<Link to=`tasks/$customer.customerid`>customer.customerid</Link>
</td>
<td>customer.enabled</td>
</tr>
))
</tbody>
</table>
<UploadForm></UploadForm>
</AnimatedDiv>
);
</Fetch>
)
export Customers
ClientTasks.js
再次调用Fetch并使用从API中提取的数据填充表。我用另一个文件来定义这个表的内容。
listTasks.js
import React, Component from 'react'
import Link from "@reach/router"
import Fetch from './fetch'
// import Delete from './delete'
import AnimatedDiv from './AnimatedDiv'
import DisplayList from './listTasks'
const APIURL = `https://SomeAIPURL`
const CUSTOMERQUERY = `tasks?customerid=`
const TASKQUERY = `&taskid=`
class ClientTasks extends React.Component
handleDelete(taskToBeDeleted)
// console.log(taskToBeDeleted);
let newData = this.state.data.filter((_data) =>
return _data != taskToBeDeleted
);
this.setState( data: newData )
render()
let customerId = this.props.customerId
return (
<Fetch url=APIURL + CUSTOMERQUERY + customerId>
( data, isLoading, error ) =>
if (!data)
return (
<div className="progress">
<div className="indeterminate"></div>
</div>)
if (error)
return <p>error.message</p>;
if (isLoading)
return (
<div className="progress">
<div className="indeterminate"></div>
</div>)
else
return (
<AnimatedDiv className='col m12 s12'>
<h1>customerId Tasks</h1>
<table id="customerList" className="highlight" >
<thead>
<tr>
<th>Task ID</th>
<th>Qty</th>
<th>Asset Category</th>
<th>Asset</th>
<th>Location</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<DisplayList handleDelete=this.handleDelete.bind(this) data=data/>
</table>
<Link to='/customers'> Back to Client List ... </Link>
</AnimatedDiv>
)
</Fetch>
)
export ClientTasks
>
这里我有一个
onClick
函数在handleDelete
文件中运行ClientTasks.js
。如果我
console.log(taskstobedeleted)
然后控制台显示我想要删除的行的内容。这是我得到的。然后我试图在clientasks.js
中使用以下功能,但我在控制台中得到一个错误说Cannot read property 'data' of null)
,我相信这是因为数据的道具是这个clientTasks
类可访问。
我还在学习,并且有更好的方法来构建代码,但是我已经碰壁了,我不想从头开始重建应用程序,如果我这样做,我可能会使用redux,但这是后来的另一个教训。我认为我的这个项目足够小,还不需要Redux。
可以以某种方式给我任何指针,如何删除我的表行?
handleDelete(taskToBeDeleted)
// console.log(taskToBeDeleted);
let newData = this.state.data.filter((_data) =>
return _data != taskToBeDeleted
);
this.setState( data: newData )
Listtasks.js
import React from 'react'
import Icon from 'react-icons-kit'
import ic_delete_forever from 'react-icons-kit/md/ic_delete_forever'
export default class DisplayList extends React.Component
render()
return (
<tbody>
this.props.data.map((task) => (
<tr key=task.taskid>
<td>task.taskid</td>
<td>task.qty</td>
<td>task.category</td>
<td>task.asset</td>
<td>task.location</td>
<td>task.enabled</td>
<td>
<button style= padding: '0px', background: 'transparent', border: '0', cursor: 'pointer' onClick=this.props.handleDelete.bind(this, task) >
<Icon style= color: 'red' icon=ic_delete_forever />
</button>
</td>
</tr>
))
</tbody>
)
我认为你的功能应该是这样的:
handleDelete(taskToBeDeleted)
// console.log(taskToBeDeleted);
let newData = this.state.data.filter((_data) => _data.taskid != taskToBeDeleted.taskid);
this.setState( data: newData )
如果您的控制台为您提供了所需的对象,那么首先,您不需要返回箭头函数,因为返回是隐式的。其次,所有的任务都已返回,因为你要求两个对象是相同的,即使它们内部具有相同的键值对,它们也总是假的。他们有不同的参考。这就是为什么我使用id,因为我认为该键的值是数字,你可以用operator ==或!=来评估它
以上是关于从表中删除行(无法读取null的属性'data')的主要内容,如果未能解决你的问题,请参考以下文章