Question

我正在尝试使用ReactJS映射对象[{thing: '', quantity: ''}]的数组，这是我使用的代码（它不起作用）。

编辑，这是原始代码

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

原因是什么？

Answer 1

将属性传递到您的地图。在销毁对象时，您需要提供确切的密钥。

例如，执行以下操作将返回undefined，因为obj没有给定的props。 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>
  )
})}

演示

<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>

ReactJS：对象的映射数组

2 个答案: