删除待办事项应用程序中的函数作为 React 中的未定义错误返回

Question

所以我正在开发一个待办事项列表应用程序，我可以在其中向页面正文添加任务，并删除已完成的任务。我正在处理应用程序的最后一部分，使删除按钮起作用。但是我的删除按钮函数 onRemove 函数在未定义时返回错误。我不知道为什么要这样做，因为代码对我来说看起来不错。也许你的眼睛能捕捉到我错过的东西？我有这个应用程序的另外两个组件，以防您需要参考。

我的 App 组件是处理我所有逻辑的地方，包括 onRemove 函数：

import React, { Component } from 'react';
import './App.css';
import Navigation from './components/Navigation';
import ListInput from './components/ListInput';
import ListName from './components/ListName';
import Item from './components/Item';
import ItemList from './components/ItemList';

class App extends Component {
  constructor() {
    super();
      this.state = {
        items: [{id: 1, text:"item 1"}, {id:2, text:"item 2"}]
      };    
  }




  addItem = (value) => {
    this.setState(state => {
      const { items } = state;
      const uuidv1 = require('uuid/v1');
      const newId = uuidv1();
      const newItem = {
        text: value, id: newId
      };


    onRemove = (id) => {
        this.setState(state => {
          const { items } = state;
          const filterdItems = 
          items.filter(items => items.id !== id);
          return { items: filterdItems };
        })
      };


      return {
        items: [ items, newItem]
      };
    }
    )
  };



  render() {
    const { items } = this.state;
    return (
      <div className="App">
       <Navigation />
       <ListName />
       <ListInput onSubmit={this.addItem} />
        <Item />
        <ItemList items={ items } 
        onRemove={ this.onRemove } />
      </div>
    );
  }
}

export default App;

这是我的 Item 组件

import React from 'react';

const Item = ({ text, onRemove }) =>{
    return (
        <div>
            <button 
            onClick={onRemove}>X

            </button>
            <ul>{text}</ul>
        </div>
    )}
export default Item;

这是我的 ItemList 组件：

import React from 'react';
import Item from './Item';

const ItemList = ({ items, onRemove }) => {
    return (
        <div>
            {items.map(items => <Item key={items.id}
            text={items.text}
            onRemove={() => onRemove(items.id)} />
            )}
        </div>
    )
}

export default ItemList;

如果您需要任何其他组件的代码或有任何其他问题，请告诉我。提前感谢您的帮助！！！

Answer 1

在您的 App 组件上，您的 onRemove 方法应该在类级别，而不是在您的 addItem 方法中。像这样的：

addItem = (value) => {
  this.setState(state => {
    const { items } = state;
    const uuidv1 = require('uuid/v1');
    const newId = uuidv1();
    const newItem = {
      text: value, id: newId
    };

    return {
      items: [ items, newItem]
    };
  })
}

onRemove = (id) => {
  this.setState(state => {
    const { items } = state;
    const filterdItems = items.filter(item => item.id !== id);
    return { items: filterdItems };
  });
}

或者，您的 onRemove 方法可能更有效，如果您知道它由唯一的对象组成，则无需遍历整个数组，当您找到所需的元素时，您可以停止对数组进行校正，然后，去掉它。像这样：

onRemove = (id) => {
  const items = [...this.state.items];
  const index = items.findIndex(item => item.id === id);

  items.splice(index, 1);

  this.setState({ items });
}

Answer 2

您的onRemove 方法在您的addItem 方法中定义。这是一个巨大的错字吗？ :) 除了这个问题，您的代码似乎可以删除。你可以在 sn-p 中看到这一点。只需将您的方法移动到正确的位置。另外，您的添加方法可能没有正确处理您的状态。

return {
    items: [ items, newItem]
};

如果你这样做，你会得到一个数组，包括你的 items 数组和新的 item。你可能想这样做：

return {
    items: [ ...items, newItem]
};

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      items: [ { id: 1, text: "item 1" }, { id: 2, text: "item 2" } ],
    };
  }

  addItem = ( value ) => {
    this.setState( ( state ) => {
      const { items } = state;
      // const uuidv1 = require( "uuid/v1" );
      // const newId = uuidv1();
      const newItem = {
        text: value,
        // id: newId,
      };

      return {
        items: [ items, newItem ],
      };
    } );
  };

  onRemove = ( id ) => {
    this.setState( ( state ) => {
      const { items } = state;
      const filterdItems = items.filter( items => items.id !== id );
      return { items: filterdItems };
    } );
  };

  render() {
    const { items } = this.state;
    return (
      <div className="App">
        {/* <ListInput onSubmit={this.addItem} /> */}
        <Item />
        <ItemList items={items} onRemove={this.onRemove} />
      </div>
    );
  }
}

const Item = ( { text, onRemove } ) => (
  <div>
    <button onClick={onRemove}>X</button>
    <ul>{text}</ul>
  </div>
);

const ItemList = ( { items, onRemove } ) => (
  <div>
    {items.map( items => (
      <Item
        key={items.id}
        text={items.text}
        onRemove={() => onRemove( items.id )}
      />
    ) )}
  </div>
);

ReactDOM.render( <App />, document.getElementById( "root" ) );

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

cmets 后更新

...items 中的三个点是spread syntax。它是一个非常有用的传播数组或对象的工具。在您的应用程序中，您希望将一个新项目添加到您的 items 数组中。

[ items, newItem ];

如您所见，如果您这样做，您将得到如下结果：

[ [ {...}, {...} ], {yourNewItem} ]

因此，您最终会得到一个数组，包括您的 items 数组和您的新项目。因此，要解决此问题，您将使用扩展语法并扩展您的数组。 Sprads 在这里表示它会选择数组中的对象，因此您将获得所有没有数组的对象。

[ ...items, newItem ];

因此，您在这里传播项目，然后添加一个新项目。一个新的数组包装了所有这些。这就是你的items 最初的样子：

[ {..}, {..}, {yourNewITem} ]

你可以在下面的sn-p中看到区别。

const state = {
  items: [{ id: 1, text: "item 1" }, { id: 2, text: "item 2" }]
};

const { items } = state;
const newItem = {
  text: "foo",
  id: 3,
};

const newItems = [ items, newItem ];
const fixedNewItems = [ ...items, newItem ];

console.log( newItems );
console.log( fixedNewItems );