反應沒有未使用的表達式

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>

現在，這里的返回是隱式的，無需編寫它。