React State映射行为异常：Firebase数据渲染问题求助

嘿，我一眼就瞅到你代码里的问题啦——你在map的回调函数里没返回要渲染的JSX元素！虽然console.log能正常打出预期值，但React需要你明确告诉它要渲染什么节点，不然它可不知道该把东西放到页面上～

核心问题分析 #

你当前的map回调用了大括号{}包裹代码块，但没有用return语句把<input>元素返回出去。箭头函数的规则是：如果用大括号包裹逻辑，必须显式写return；如果是单行表达式，可以省略大括号和return。

修复后的代码 #

先给你改好render方法：

render() {
  console.log(this.state.quotes[0])
  return (
    <div>
      {this.state.quotes.map(quote => {
        console.log(quote.person.fName);
        // 显式return要渲染的JSX
        return <input type="text" placeholder={quote.person.fName} />;
      })}
    </div>
  );
}

或者更简洁的写法（省略大括号和return），同时别忘了加React要求的列表key属性（用你从Firebase拿到的quote.key就完美）：

render() {
  console.log(this.state.quotes[0])
  return (
    <div>
      {this.state.quotes.map(quote => (
        <input 
          key={quote.key} 
          type="text" 
          placeholder={quote.person.fName} 
        />
      ))}
    </div>
  );
}

额外的优化建议 #

为了避免组件卸载后Firebase监听还在运行导致内存泄漏，记得在组件卸载时取消监听：

componentWillUnmount() {
  if (this.firebaseRef) {
    this.firebaseRef.off('child_added');
  }
}

内容的提问来源于stack exchange，提问作者foxtrotuniform6969