Javascript 在React中使用map渲染元素

我有一个名为

brands

的变量，它是一个列表。在

render

中的

return

下，当我尝试映射列表并创建新的段落标记时，我得到以下错误：

预期在arrow函数数组回调return中返回一个值

var brands = [];

componentDidMount(){
    database.ref("/brands/").on('child_added', (snapshot)=>{
        var data = snapshot.val();
        console.log(data);
        brands.push(data);
    })
}

render(){
    return(
        <div>
            {brands.map((brand)=>{
                <p>{brand}</p>
            }
            )}
        </div>
    )
}

var品牌=[]；
componentDidMount（）{
database.ref（“/brands/”）on（'child_added'，（snapshot）=>{
var data=snapshot.val（）；
控制台日志（数据）；
品牌推送（数据）；
})
}
render（）{
返回(
{brands.map（（品牌）=>{
{brand}

}
)}
)
}

将

return

语句添加到arrow函数中，它将按预期工作：

render() {
  return(
     <div>
       {brands.map((brand) => {
         return <p>{brand}</p>;
       })}
     </div>
   )
}

您还必须将

品牌

置于状态，以便组件在

品牌

更新时重新渲染。确保不要推送到数组，因为这样会使它发生变异

示例

class App extends React.Component {
  state = { brands: [] };

  componentDidMount() {
    database.ref("/brands/").on("child_added", snapshot => {
      var data = snapshot.val();
      this.setState(previousState => {
        return { brands: [...previousState.brands, data] };
      });
    });
  }

  render() {
    return (
      <div>
        {this.state.brands.map((brand, index) => (
          <p key={index}>{brand}</p>;
        ))}
      </div>
    );
  }
}

类应用程序扩展了React.Component{
国家={品牌：[]}；
componentDidMount（）{
database.ref（“/brands/”）on（“添加了子项”，快照=>{
var data=snapshot.val（）；
this.setState（previousState=>{
返回{brands:[…previousState.brands，data]}；
});
});
}
render（）{
返回(
{this.state.brands.map（（品牌，索引）=>(
{brand}
；
))}
);
}
}

您也可以像这样放下大括号：

---

{brands.map（brand=>{brand}
）}

我建议使用函数和返回，并使用状态存储您的

品牌

import _ from 'lodash';

constructor() {
   super();
   this.state = {
     brands: []
   }
}

componentDidMount(){
    let newData = [];
    database.ref("/brands/").on('child_added', (snapshot)=>{
        let data = snapshot.val();
        console.log(data);
        newData.push(data);
    });

    this.setState({
         brands: newData
    });
}

renderBrand = () => {
  return _.map(this.state.brands, (brand, i) => {
     return <p>{brand}</p>;
  });
}

render(){
    return(
        <div>
            { this.renderBrand() }
        </div>
    )
}

从“lodash”导入； 构造函数（）{ 超级（）； 此.state={ 品牌：[] } } componentDidMount（）{ 设newData=[]； database.ref（“/brands/”）on（'child_added'，（snapshot）=>{ 让data=snapshot.val（）； 控制台日志（数据）； newData.push（数据）； }); 这是我的国家({ 品牌：新数据 }); } renderBrand=（）=>{ return.map（this.state.brands，（brand，i）=>{ 返回{brand}

； }); } render（）{ 返回( {this.renderBrand（）} ) }

---

非常感谢您抽出时间。我得到的错误已经修复，但我仍然没有在HTML DOM中看到输出。@Vedant不客气！这太令人沮丧了。你能在问题中包括你的全部内容吗？很难说

品牌

是否来自您所在的州，或者它是否是组件外部的规则数组，等等。它是组件外部的规则数组。这有什么区别吗？@Vedant啊，我明白了。是的，很遗憾，这是行不通的。当道具或状态更改时，组件将重新渲染，因此将品牌存储在外部阵列中不会导致重新渲染。可能值得为整个组件创建一个新问题，因为此特定错误已被解决。@Vedant yes..

this.state.brands

vs

brands

您可能希望将

brands

置于状态。因为在状态更改之前，它不会重新渲染组件。

import _ from 'lodash';

constructor() {
   super();
   this.state = {
     brands: []
   }
}

componentDidMount(){
    let newData = [];
    database.ref("/brands/").on('child_added', (snapshot)=>{
        let data = snapshot.val();
        console.log(data);
        newData.push(data);
    });

    this.setState({
         brands: newData
    });
}

renderBrand = () => {
  return _.map(this.state.brands, (brand, i) => {
     return <p>{brand}</p>;
  });
}

render(){
    return(
        <div>
            { this.renderBrand() }
        </div>
    )
}