Алгоритм генерации случайной сетки для materialUI со строками, которые содержат до 3 столбцов

Question

Я создаю приложение React, работающее с API Reddit и oAuth.

Я использую MaterialUI, и я пытаюсь использовать Компонент для построения сетки из 3 столбцов изображений, которые имеют динамически генерируемую ширину столбца.значения, макс., очевидно, составляет 3.

Первому элементу в массиве извлеченных постов изображения будет присвоена пара ключ / значение случайного числа от 1 до 3. Второму элементу будет присвоен ключ / значениепара чисел, заканчивающих строку, если значение первого элемента равно! = 3.

Затем оно начнется снова, идея состоит в том, что каждый раз, когда сетка загружается, ее первый элемент может иметь ширину 1 столбец, 2 столбца в ширину или целая строка из 3 столбцов в ширину, и алгоритм должен соответствующим образом завершить оставшуюся часть сетки, то есть все строки должны добавить до 3.

Я попытался обработать массивсообщений различными способами: от присвоения значений первым двум объектам в массиве вне цикла, затем определения «последнего сообщения» и «сообщения»перед этой переменной, чтобы попытаться найти способ сложения строк.Я попытался придумать набор правил, которые бы работали независимо от положения массива, но, похоже, не может прийти к ответу, у которого нет нескольких крайних случаев.

makeTiles() {
    let posts = this.props.posts;
    let postsWithCols = [];
    posts[0].cols = Math.floor(Math.random() * 3 + 1);
    console.log(posts[0])
    postsWithCols.push(posts[0]);
    let previousPost = postsWithCols[postsWithCols.length - 1];
    switch(previousPost.cols) {
      case 1: 
      console.log('is1');
      posts[1].cols = Math.floor(Math.random() * 2 + 1);
      postsWithCols.push(posts[1]);
      break;
      case 2: 
      console.log('is2');
      posts[1].cols = 1;
      postsWithCols.push(posts[1]);
      break;
      case 3: 
      console.log('is3');
      posts[1].cols = Math.floor(Math.random() * 3 + 1);
      postsWithCols.push(posts[1]);
      break;
      default:
      console.log('something went wrong');
      break;
    }
    let postBeforeThat = postsWithCols[postsWithCols.length - 2];
    console.log(previousPost)
    console.log(postBeforeThat)
    console.log(postsWithCols)
  }
  render() {
    this.makeTiles();
    return (
      <div>
        open grid when i can get tileData figured out.
        {/* <ImageGrid tileData={this.makeTiles()} {...this.props}/> */}
      </div>
    );
  }
}

Единственный способ, которым у меня когда-либо была такая работа, она продолжала чередоваться между 1 и 2 после первой начальной плитки.

Answer 1

В итоге я смог прийти к этому решению.

      getPostsWithColumns = (posts) => {
    const postsWithColumns = posts.reduce((accum, post) => {
      const lastIndex = accum.length - 1;
      if (accum[lastIndex] && this.totalColumns(accum[lastIndex]) < 3) {
        const currentTotal = this.totalColumns(accum[lastIndex]);
        const postWithCols = {
          ...post,
          cols: currentTotal === 2 ? 1 : this.randomNumber(2)
        };
        accum[lastIndex] = [...accum[lastIndex], postWithCols];
        return accum;
      }
      const postWithCols = {
        ...post,
        cols: this.randomNumber(3)
      }
      return [...accum, [postWithCols]];
    }, []);
    return postsWithColumns.reduce((accum, group) => [...accum, ...group], []);
  };

Answer 2

Здесь есть пара вопросов.Прежде всего, код, представленный на самом деле, даст вам максимум два столбца значения.Там нет ничего зацикливания или возврата, чтобы заполнить больше столбцов.Во-вторых, я думаю, что вы пытаетесь сделать это, чтобы он создал массив сообщений, которые также имеют значения столбцов, но метод никогда не возвращает окончательное значение (postsWithCols).Я предполагаю, что вы все еще просто хотите получить список постов со значениями столбцов и не разбивать его на строки.

let posts = this.props.posts;

// Const for the max
const maxColumns = 3;

// Variable to keep track of current remaining columns. 
let remainingColumns = maxColumns;

// Go over each post and return the post with cols in to a new array. 
let postsWithCols = posts.map((post, index) => {
   // Special case, if last item, fill remaining
   if (index === posts.length - 1) {
      post.cols = remainingColumns;
      return post;
   }

   // Get a random number for the remaining columns for this row
   const cols = Math.floor(Math.random() * remainingColumns + 1);
   post.cols = cols;

   // Subtract the value
   remainingColumns = remainingColumns - cols;

   // If value is 0, reset to max. 
   if (remainingColumns <= 0) {
      remainingColumns = maxColumns;
   }

   // Add to result array
   return post;
});

console.log(postsWithCols); 

Есть еще кое-что, что можно изменить, но этообщая идея.