Данные функционального компонента не отображаются повторно при обновлении в Framer Preview - PullRequest
Новая
       37

Данные функционального компонента не отображаются повторно при обновлении в Framer Preview

1 голос
/ 23 сентября 2019

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

Список, из которого он получает данные, по существу 

const area = [a1,a2,a3,.....,a50]

Из этого списка я setState([]) другого списка - регион , который отображается вКадр, используя array.map


Я пробовал различные методы из https://www.robinwieruch.de/react-function-component

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

export function DynamicList() {
    const [region, setRegion] = React.useState([])
    useEffect(() => {
        setInterval(() => {
            //take a random integer between 0 and length of the main array - areas

            // if it already exists in the smaller array - regions, then delete it at that index
            if (region.indexOf(areas[randNum]) != -1) {
                // find the index to delete
                delIndex = region.indexOf(areas[randNum])
                console.log(areas[randNum] + " " + delIndex)

                //delete the item at that index
                region.splice(delIndex, 1)
            }

            // adding the random itemt o first position
            region.splice(0, 0, areas[randNum])
            region.join()

            setRegion(region)
            console.log(region)
        }, 6000)
}, [])
}

Console.log работает, и я вижу, что обновляется массив Region , но он не отображается в разделе предварительного просмотра

Часть для рендеринга пользовательского интерфейса: 

return(
   <Stack>
   {region.map((item, index) => {
       return (
           <Frame
            background=""
            key={index}
            defaultValue={item}
            height={10}
            width={200}
            radius="4%"
            color="ffffff"
            style={{
                fontFamily: "Lato",
                fontSize: 10,
            }}
            >
                {item}
            </Frame>
        )
    })}
  </Stack>
)



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

РЕДАКТИРОВАТЬ: РЕШЕНО.ОТВЕТЬ НИЖЕ

1 Ответ

0 голосов
/ 25 сентября 2019

Решение повлекло за собой установку региона по-разному.

с setRegion(region) region не узнает, что в массив внесены изменения.Следовательно, использование setRegion([...region]) копирует temp Region в Region.

Таким образом код становится 

useEffect(() => {
    const id = setInterval(() => {
    randNum = Math.floor(0 + Math.random() * areas.length)

    // if it already exists, then delete it
    if (region.indexOf(areas[randNum]) != -1) {
         // find the index to delete
         delIndex = region.indexOf(areas[randNum])
         console.log(areas[randNum] + " " + delIndex)
         //delete the item at that index
         region.splice(delIndex, 1)
    }

    // adding the random itemt o first position
    region.splice(0, 0, areas[randNum])

    // region.join()
    setRegion([...region])
    console.log(region)
    }, 2000)

}, [region])
...