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

Я пытаюсь запустить array.splice (), но, поскольку я мало знаю о том, как реактивность строится на Svelte, все способы, которые я пробовал, сломали все или не дали никакого эффекта.

Вот компонент, где сообщения - это массив, о котором я говорю:

<script>
import AppBlogPost from "./PostCards/AppBlogPost.svelte";

export let posts;
</script>

<style lang="scss">
</style>

<ul>
  {#each posts as post}
    <AppBlogPost {post} />
  {/each}
</ul>

2
Ricardo Gouveia 5 Сен 2020 в 15:17

3 ответа

Лучший ответ

Чтобы пропустить первый элемент в массиве, вы можете просто использовать деструктуризацию массива:

let [, ...arr2] = arr

Это возьмет ваш arr и запишет первый элемент в никуда (пустое пространство), а все остальное запишет в arr2 с помощью оператора распространения.

В случае Svelte вы, вероятно, хотите, чтобы ваш массив сообщений оставался реактивным, поэтому у вас есть присвоение меток как таковое с помощью $

<script>
import AppBlogPost from "./PostCards/AppBlogPost.svelte";

export let posts;
$: [, ...otherPosts] = posts
</script>

<ul>
  {#each otherPosts as post}
    <AppBlogPost {post} />
  {/each}
</ul>

Это также открывает новую возможность, я думаю, вы используете posts[0] для другого отображения первого сообщения? Если вы измените реактивную инструкцию на $: [firstPost, ...otherPosts] = posts, вы получите ее в удобной переменной!

3
Stephane Vanraes 5 Сен 2020 в 15:34

Если члены вашего массива posts изменятся, svelte не увидит этого. Вы должны присвоить значения вашему массиву posts как новые, тогда svelte увидит, что массив был изменен.

const remove=()=>{
  posts.splice(0,1)
  posts=[...posts]
}
0
grohjy 5 Сен 2020 в 12:43

Svelte определяет, где требуется повторная визуализация, проверяя присвоение с помощью оператора =, а не мутации. Например:

// no change detected
const obj = { foo: 1 }
obj.bar = 2

// change detected
let obj = { foo: 1 }
obj = { ...obj, bar: 2 }

Что касается Array # splice, Это:

изменяет содержимое массива, удаляя или заменяя существующие элементы и / или добавляя новые элементы на месте .

Это «на месте» означает, что он изменяет массив и возвращает удаленные элементы.

Если вы знакомы с API-интерфейсом splice и хотите его использовать, вы можете создать на его основе неизменяемую версию:

const spliceImmutable = arr => (...args) => {
    const clone = [...arr]
    clone.splice(...args)

    return clone
}

let arr = [0, 1, 2, 3, 4]
arr = spliceImmutable(arr)(2, 1, null) // [0, 1, null, 3, 4]

Или используйте собственную логику, основанную на Array # slice < / a> вместо этого (на мой взгляд, более читабельно):

let arr = [0, 1, 2, 3, 4]
arr = [ ...arr.slice(0, 2), null, ...arr.slice(3) ] // [0, 1, null, 3, 4]
0
Lionel Rowe 5 Сен 2020 в 13:47