Framer Preview 中的功能组件数据不会在更新时重新渲染

Question

我正在制作一个列表视图，当数据源列表更新时，它必须每隔几秒动态更改一次。

从中获取数据的列表本质上是

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

从这个列表中，我 setState([]) 另一个列表 - region 使用 array.map

渲染成帧

我尝试了 https://www.robinwieruch.de/react-function-component

中的各种方法

我正在使用 useEffect() 对应该渲染的数组 regions 进行更改

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 数组正在更新，但它没有在预览部分呈现

渲染UI的部分是

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>
)

我希望在预览中，城市会随着每个新城市被添加到显示在现有列表上方的 region 数组中不断更新。

编辑：已解决。回答如下

Answer 1

解决方案需要以不同方式设置区域。

with setRegion(region) region 不知道数组已经发生变化。因此，使用 setRegion([...region]) 将 temp 区域复制到区域。

这样代码就变成了

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])

Framer Preview 中的功能组件数据不会在更新时重新渲染

Functional Component data not re-rendering on update in Framer Preview

javascript

reactjs

framerjs