title: React setState in map
body: <p>I'm trying to transform the data get from my database to state~
  but It only caught the last data in my database. I guess I didn't use the react hook right, it kept overwrite the previous state, so cause the problem now. I've tried lots of ways, but it still not works. I hope can find someone to help me in here QQ</p>
  <p>Here is my code</p>
  <pre><code>const [dataSource, setDataSource] = React.useState([]);
  React.useEffect(() =&gt; {
      orders.map((data, i) =&gt;
        setDataSource([
          ...dataSource,
          {
            key: i,
            id: helpers.leftPad(data.oid, 6, 0),
            name: data.cname,
            totalPrice: data.total_price === null ? 'No data' : data.total_price,
            orderDate: data.order_date,
          },
        ])
      );
    }, []);
  </code></pre>
  <p>orders are the data came from the backend and it looks like</p>
  <pre><code>[...
  ...
  744: {oid: 749, cid: 545, cname: &quot;Jerry&quot;, order_date: &quot;2018-09-04&quot;, …}
  745: {oid: 750, cid: 546, cname: &quot;Kevin&quot;, order_date: &quot;2018-09-18&quot;, …}
  ...
  ...]
  </code></pre>
  <p>Thank you guys, it will help me a lot!!</p>