Как правильно заполнить массив?

Question

import React from "react";

export default function App() {
  const [myArray, setMyArrayState] = React.useState([
    { name: "John" },
    { name: "Sam" }
  ]);
  const [testArray, setTestArrayState] = React.useState([]);

  
  const fillingArray = (array, newArray) => {
    for (let i = 0; i < array.length; i++) {
      newArray.push(array[i]);
    }
    if (newArray.length < 100) {
      fillingArray(newArray, array);
    } else {
      setTestArrayState(newArray)
    }
  }

  React.useEffect(() => {
    fillingArray(myArray, testArray)
  });
  return (
    <div className="App">
      <h5>Users: </h5>
      {testArray.map((u) => <p>{u.name}</p>)}
    </div>
  );
}

Пытаюсь при загрузке компонента заполнить массив testArray дубликатами массива myArray до тех пор пока кол-во элементов не станет ~100, но почему-то рендер не происходит. Почему так? И правильный ли я выбрал способ для заполнения массива?

Answer 1

вот так попробуйте:

function App() {
  const [myArray, setMyArrayState] = React.useState([
    { name: "John" }, { name: "Sam" }, { name: "Phil" }
  ]);
  const [testArray, setTestArrayState] = React.useState([]);
  
  const fillingArray = (howMany) => {
    const newArray = []
    for (let i = 0; i < howMany; i++) {
      newArray.push(...myArray);
     }
     setTestArrayState(newArray)
  }

  React.useEffect(() => {
    fillingArray(10)
  }, []); // Поместите [] сюда. Похоже на: mounted

  return (
    <div className="App">
      <h5>Users: </h5>
      {testArray.map((u) => <p>{u.name}</p>)}
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('mydiv'))

<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<body>
<div id="mydiv"></div>
</body>

БЛОГ НА HUSL

Как правильно заполнить массив?

Ответы (1 шт):