React rendering Array.map data twice-CodePudding

I have a small piece of react code which renders a list of names and their related information like age and email addresses. The code compiles fine but I see that the data is rendered twice on the page. Here is how I call the component:

const peopleData : Person[] = [{id:1,name:"John",age:22},{id:2,name:"Sasha",age:23}]

function App() {
  return (
    <div className="App">
        <Basic {...peopleData}/>
    </div>
  );
}

And here is the component:

export interface Person {
    id      : number;
    name    : string;
    age     : number;
    email?  : string;
}


function Basic(input: Person[]) {
  let newPeopleData : Person[] = [];
  const [data,setData] = useState<Person[]>([]);

  useEffect(()=>{
    // Create a new data array 
    let data : Person[] = Object.values(input);
    let size : number = Object.values(input).length;

    console.log("Data load start."   JSON.stringify(data));
    for(let index=0;index<size;index  )
    {
        let {id,name,email} = input[index] as Person;
        let newEmail = name   "@gmail.com"
        newPeopleData.push({id:id,name:name,email:newEmail} as Person)
    }
    setData(newPeopleData);
    console.log("Data loaded."   JSON.stringify(data));
    return ()=>{
        console.log("Data deleted."   JSON.stringify(data));
    }
  },[]);


  return (
    <div>
        {data.map((unit)=>{
            return (
                <h1 key={unit.id}>{unit.name},age:{unit.age},email:{unit.email}</h1>
            )
        })}
    </div>
  )
}

I have two questions:

Is the "peopleData" array passed correctly to the component? Or is there a better recommended way to do it?
Why does the browser render the data twice when it is refreshed, although the "unit.id" is unique for each dataset.

Thanks

I tried to remove the key attribute inside the h1 tag thinking that React can assign its own unique IDs to each map object. But this did not work either.

CodePudding user response：

React use props, the correct this:

<Basic data={peopleData}/>

in the Component:

interface Props {
  data: Person[]
}
function Basic({data}: Props) {}

in the console data render twice because react in the index use the Strict Mode

<React.StrictMode>

CodePudding user response：

move the array variable inside useEffect

useEffect(() => {

  // move the variable inside as useEffect runs twice in dev strict mode
  // to help catch such error
  let newPeopleData : Person[] = [];

  // Create a new data array 
  let data : Person[] = Object.values(input);
  let size : number = Object.values(input).length;

  console.log("Data load start."   JSON.stringify(data));
  for(let index=0;index<size;index  )
  {
      let {id,name,email} = input[index] as Person;
      let newEmail = name   "@gmail.com"
      newPeopleData.push({id:id,name:name,email:newEmail} as Person)
  }
  setData(newPeopleData);
  console.log("Data loaded."   JSON.stringify(data));
  return ()=>{
      console.log("Data deleted."   JSON.stringify(data));
  }
},[]);

I was wondering how are the props passed