Question

我有一个名为“ brands”的变量，它是一个列表。在render（）中的return下，当我尝试映射列表并创建新的段落标签时，出现此错误-预期会在箭头函数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>
    )
}

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

Answer 2

您也可以这样删除括号： abstract public T create();

Answer 3

我建议使用功能和返回，并使用状态存储您的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>
    )
}

在React中使用map渲染元素

3 个答案: