ReactJS: Карта массив объектов

Question

Я пытаюсь сопоставить массив объектов [{thing: '', quantity: ''}] с ReactJS, и это код, который я использую для него (и он не работает).

РЕДАКТИРОВАТЬ это оригинальный код

<ul>
   {this.state.ingredients.map(({i,q},k)=>{           
       return ( 
          <div key={k}>
             <li>{i} - {q}</li><br/>
          </div>
       )
    })}  
</ul>

в чем причина?

Answer 1

Передайте свойства на вашу карту.При деструктурировании объектов вам необходимо предоставить точные ключи. Например,

, выполнив следующее возвращает undefined, поскольку у obj нет заданных реквизитов. Object_destructuring

const obj = {a: 'a', b: 'b'}

const { c, d} = obj;

console.log(c, d);

{this.state.things.map(({ thing, quantity }, k) => {
  return (
    <div key={k}>
      <li key={k}>{thing} - {quantity}</li><br />
    </div>
  )
})}

DEMO

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<div id="root"></div>

<script type="text/babel">

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      name: 'React',
      things: [{ thing: 'Thing ', quantity: 23 }],
    };
  }

  render() {

    return (
      <div>
        {this.state.things.map(({ thing, quantity }, k) => {
          return (
            <div key={k}>
              <li key={k}>{thing} - {quantity}</li><br />
            </div>
          )
        })}
      </div>
    );
  }
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
);
</script>

Answer 2

Возможно, вы ищете что-то вроде этого, вы неправильно разрушаете.

const obj = {thing:'something',quantity:1};
const arr = [obj];
{
arr.map(({ thing, quantity }, index) => {
    return ( 
        <div key={index}>
           <li>{thing} - {quantity}</li><br/>
        </div>
    )
})}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>