Question

我是React的新手，我知道我的代码做错了什么。我只是想显示我可以删除的项目列表，感谢您的任何帮助。

import React from 'react';

class ApprovalList extends React.Component{
  constructor(){
    super();
    this.state={
      data:[
        {name:'order 1'},
        {name:'order 2'},
        {name:'order 3'} 
      ]
    }
    this.delete=this.delete.bind(this);
  }
  delete(id){
    this.setState({
      data:this.state.data.filter(el => el != id )
    });
  }
  render(){
    return(
      <Item data={this.state.data} delete={this.delete}/>
    );
  }
}

class Item extends React.Component{
  delete(id){
    this.props.delete(id);
  }
  render(){
    return(
      <div>
        {this.props.data.name.map(el=><p onClick={this.delete.bind(this,el)}>{el}</p>)}
      </div>
    );
  }
}

export default ApprovalList;

Answer 1

name组件内的data上的Item属性不可用。道具data是一个您必须调用data.map()而不是data.value.map()的数组。这是Item组件render的功能：

class Item extends React.Component {
  delete(id) {
    this.props.delete(id);
  }

  render() {
    return (
      <div>
        {this.props.data.map(el => (
          <p key={el} onClick={() => this.delete(el)}>
            {el.name}
          </p>
        ))}
      </div>
    );
  }
}

我收到错误消息“无法读取未定义的属性'map'”

1 个答案: