Question

代码中没有错误，这是什么问题？我无法关闭列表项并更改组件的状态！
我应该做些什么才能使我的解雇工作，还有没有比上述更好的方法了？

这是代码：

import React, { Component } from 'react';
import './App.css';

const list = [
  {
    title: 'React',
    url: 'https://facebook.github.io/react/',
    author: 'Jordan Walke',
    num_comments: 3,
    points: 4,
    objectID: 0,
  },
  {
    title: 'facebook github',
    url: 'https://facebook.github.io/',
    author: 'Janardhan',
    num_comments: 3,
    points: 6,
    objectID: 1,
  },
]
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list
    }
    this.onDismiss = this.onDismiss.bind(this);
  }
  onDismiss(id) {
    const isNotID = item => item.objectID !== id;
    const updatedList = this.state.list.filter(isNotID)
    this.setState({ list: updatedList })
    console.log("dismissed??")
  }

  render() {
    return (
      <div className="App">
        {list.map(item =>
          <div key={item.objectID}>
            <span>
              <a href={item.url}>{item.title}</a>
            </span>
            <span>{item.author}</span>
            <span>{item.points}</span>
            <span>{item.num_comments}</span>
            <button onClick={() => this.onDismiss(item.objectID)} >Dismiss</button>
          </div>
        )}
      </div>
    );
  }
}

export default App;

Answer 1

问题出在这里：

const isNotID = item => item.objectId !== id;

它应该是objectID而不是objectId

编辑

在render方法中，它应该是this.state.list.map

单击关闭时，我无法删除列表项？

1 个答案:

编辑