1

Question

我在下面粘贴的那段代码给我一个错误，显示预期的赋值或函数调用，我认为有人可以检查语法错误

 render() {
    const { orderDisplay } = this.state.orders;

    return (
      <div>
        {orderDisplay.map(order => {
          <Order
            key={order.id}
            ingredients={order.ingredients}
            price={order.price}
          />;
        })}
      </div>
    );
  }

Answer 1

这不是语法错误，而是由ESLint no-unused-expressions规则引起的linter错误。 map回调应该返回一个值，但不会。

要使用箭头函数的隐式返回，应该使用

{orderDisplay.map(order => (
  <Order ... />
))}

代替

{orderDisplay.map(order => {
  <Order ... />
})}

Answer 2

您需要从.map函数返回一些内容

喜欢

1

render() {
    const { orderDisplay } = this.state.orders;

    return (
      <div>
        {orderDisplay.map(order => {
          return <Order
            key={order.id}
            ingredients={order.ingredients}
            price={order.price}
          />;
        })}
      </div>
    );
  }

或者如果您在该函数内未执行任何逻辑，则可以直接返回一些值

2

render() {
    const { orderDisplay } = this.state.orders;

    return (
      <div>
        {orderDisplay.map(order => (
          <Order
            key={order.id}
            ingredients={order.ingredients}
            price={order.price}
          />;
        ))}
      </div>
    );
  }

显示预期分配或功能调用错误的代码

2 个答案:

1

2