反应没有未使用的表达式

Question

我有一个简单的React Shoppinglist组件

我遇到错误

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>

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