在 React 中使用 map 渲染元素答案

【问题标题】：Render element using map in React在 React 中使用 map 渲染元素
【发布时间】：2018-07-12 12:30:10
【问题描述】：

我有一个名为brands 的变量，它是一个列表。在render 中的return 下，当我尝试映射列表并创建新的段落标记时，出现此错误：Expected to return a value in arrow function array-callback-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>
    )
}

【问题讨论】：

您可能希望将brands 置于状态。因为在状态改变之前它不会重新渲染组件。

标签： javascript reactjs dictionary jsx

【解决方案1】：

将return 语句添加到您的箭头函数，它将按预期工作：

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

您还可以将 {} 更改为 () 以获得隐式返回：

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

您还必须将brands 置于状态，以便在brands 更新时组件将重新渲染。确保不要推送到数组，因为这会改变它。

示例

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>
    );
  }
}

【讨论】：

非常感谢您抽出宝贵的时间。我得到的错误已得到修复，但我仍然看不到 HTML DOM 中的输出。
@Vedant 不客气！这很令人沮丧。您能否在问题中包含您的整个组件？很难说brands是来自你的状态，还是组件外的常规数组等等。
是组件外的常规数组。这有什么区别吗？
@Vedant 啊，我明白了。是的，很遗憾，这行不通。当 props 或 state 发生变化时，组件会重新渲染，因此将品牌存储在外部数组中不会导致重新渲染。可能值得为您的整个组件创建一个新问题，因为此特定错误已得到解决。
@Vedant yes..this.state.brands vs brands

【解决方案2】：

你也可以像这样去掉大括号： { brands.map(brand => <p>{brand}</p>) }

【讨论】：

【解决方案3】：

我建议使用function和return，并使用state来存储你的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>
    )
}

【讨论】：