Question

我有一个简单的React购物清单组件

我遇到错误

Expected an assignment or function call and instead saw an expression  no-unused-expressions

从此行

<li key={id}>

是什么导致此错误。

import React, {Component} from 'react';
import uuid from 'uuid';

class ShoppingList extends Component{

  state = {
    items:[
      { id: uuid(), name: 'Eggs'},
      { id: uuid(), name: 'Water'},
      { id: uuid(), name: 'Steak'},
      { id: uuid(), name: 'Milk'}
    ]
  }

  render(){

    const {items} = this.state;

    return(
      <div>
        <button>
          Add Item
        </button>  


        <ul>
          {items.map(({id, name}) => {
            <li key={id}>
              {name}
            </li>  
          })}
        </ul>

      </div>    
    );
  }
}

export default ShoppingList

Answer 1

您错过了return与<li key={id}>...</li>的比赛。应该是：

<ul>
  {items.map(({ id, name }) => {
    // see the return
    return <li key={id}>{name}</li>;
  })}
</ul>

因为它是单行表达式，所以仅li。您可以这样写：

<ul>
  {items.map(({ id, name }) => (
    <li key={id}>{name}</li>
  ))}
</ul>

现在这里的返回值是隐式的，无需编写。

反应没有未使用的表达式

1 个答案: