React + Firebase - 删除映射组件内的 firebase 对象

Question

我正在尝试将我的项目对象的键传递给我的映射组件以删除它们。

更新：使用_.forEach(project, (proj, key) => <Project key={key} {... more props here}/>) 会引发关于对象无效的错误反应子级。我猜这是因为project i'm forEaching over 需要变成一个数组？我一直在尝试格式化componentWillMount()，但是当我尝试使用setState 运行forEach 并推送到一个新数组时，我不断得到重复

componentDidMount() {
    projectRef.on('value', snap => {
      this.setState({projects: snap.val()})
      // somehow i need to create a new array of objects that include the key.
    })
  }

更新：我删除了 codepen 示例。我更喜欢代码沙箱。好多了。 =)

And here's the code sandbox （如果您收到有关 [DEFAULT] 应用程序已定义的错误，只需刷新输出浏览器，它就会工作。我不知道为什么会这样做......哦，好吧。我添加了我的尝试在代码沙箱示例中使用forEach。希望有人可以让我知道我做错了什么。

Answer 1

是的，map 返回对象值的数组，在这种情况下，您可以通过<Display /> 组件中的道具访问对象，但不能访问对象每个元素的键。

也许您可以使用 lodash 的 forEach 来循环并访问数据集合中每个元素的键和值。像这样，您可以将键（这将是 remove 方法的目标）作为特定道具传递，并将值作为组件中的 item 道具传递。

export default class extends React.Component {
  constructor() {
    super()
    this.state = {
      items: null
    }
  }
  render() {
    return() {
      <div>
        {_.forEach(this.state.items, (item, key) => 
           <Display key={key} itemKey={key} item={item}/>
        )}
      </div>
    }
  }
}

// then the display component
removeItem() {
   firebase.database().ref({this.props.itemKey}).remove();
}
render() {
  return (
    <div>{this.props.item.name} <button onClick={this.removeItem}>X</button>
  )
}

这里有一个简单的例子来说明forEach 的工作原理：

https://jsbin.com/xolejoj/edit?js,console

---

编辑 08-12-2017

您的代码的问题在于您错过了map 返回对象每个元素的键和值的事实。在这种情况下，您的对象有一个键字符串和一个作为对象的值。然后在您的 JSX 上，您尝试传递密钥，因为它是对象（值）的一部分，但不是，因此您在组件的 props 中获得了一个未定义的值。

将您的代码更改为：

<div>
  {_.map(projects, (proj, key) => <Project 
      key={key} 
      title={proj.title}
      subtitle={proj.subtitle}
      desc={proj.desc}
      itemKey={key} // just the key of the object
    />
  )}
</div>

问题是每个对象的键是firebase中的标识符，值是具有您需要的数据的对象，但该对象没有key属性，因此它被评估为null。