时间戳

首页 > 解决方案 > 从表中删除行（无法读取 null 的属性“数据”）

reactjs - 从表中删除行（无法读取 null 的属性“数据”）

问题描述

我是 Gatsbyjs 和 reactjs 的新手，但我仍然不太了解 props.and states 的工作原理。

我正在构建这个简单的应用程序，它从 API 获取客户列表和每个客户的任务列表。

我正在使用 Reach/Router 来渲染组件。一切都按预期工作，以显示带有客户列表的表格，当我单击客户时，会呈现一个新页面，该页面显示该客户的任务列表。

现在，我正在尝试使表格可编辑。我首先尝试简单地删除一些行。这就是我卡住的地方。

编辑

我相信我得到了错误，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 }

获取.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

客户.js

这是我展示客户表格的地方。我有每个客户的链接，并在“到达/路由器”的帮助下呈现客户任务表。

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运行的函数。handleDeleteClientTasks.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>
        )
    }

}

标签： reactjsgatsbyreact-propsreact-state-management

解决方案

我认为你的功能应该是这样的：

  handleDelete(taskToBeDeleted) {
    // console.log(taskToBeDeleted);
    let newData = this.state.data.filter((_data) => _data.taskid != taskToBeDeleted.taskid});
    this.setState({ data: newData })
    }

如果您的控制台正在为您提供所需的对象，那么首先，您不需要在箭头函数中返回，因为 return 是隐式的。其次，您的所有任务都已返回，因为您要求两个对象是否相同，即使它们内部具有相同的键值对，它们也总是错误的。他们有不同的参考。这就是我使用 id 的原因，因为我认为该键的值是数字，您可以使用 operator == 或 != 对其进行评估

推荐阅读