重复数据数组 .map() 反应答案

【问题标题】：repeated data array .map () react重复数据数组 .map() 反应
【发布时间】：2020-06-19 20:10:19
【问题描述】：

谁能告诉我为什么我的 .map () 数组在屏幕上多次返回相同的数据？我只想显示一次，但我不知道为什么会重复，

有人可以帮我吗？

反应代码如下：

console.log('>>> [HistoricosAtendimento] props: ', props);
  const viewData = props.historicos || [];
  const convertToArray = Object.values(viewData);
  return (
    <>
      <SC.Container>
        <SC.Item>
          {convertToArray.map((item) => {
            console.log('convertToArray', convertToArray);
            return (
              <SC.Item key={item.protocolo}>
                <SC.Description>{item.textNotas}</SC.Description>
              </SC.Item>
            );
          })}
        </SC.Item>

【问题讨论】：

你能在jsfiddle或者codepen上做一个demo吗？

标签： arrays reactjs arraylist array.prototype.map

【解决方案1】：

只需去掉外包装组件：

     <SC.Container>
        // <SC.Item> <= remove
          {convertToArray.map((item) => {
            // console.log('convertToArray', convertToArray); // should move out of JSX
            return (
              <SC.Item key={item.protocolo}>
                <SC.Description>{item.textNotas}</SC.Description>
              </SC.Item>
            );
          })}
        // </SC.Item>  <= remove

【讨论】：