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

【问题标题】：Functional Component data not re-rendering on update in Framer Preview在 Framer Preview 中更新时不会重新渲染功能组件数据
【发布时间】：2020-01-23 02:56:58
【问题描述】：

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

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

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

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

我尝试了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 数组中，城市会不断更新。

编辑：已解决。下面回答

【问题讨论】：

您在哪里以及如何更新 region 数组？
Harish，我使用SetInterval 在useEffect 中每6 秒更新一次region 数组。我正在更新区域数组，然后将其传递给setRegion()
你的渲染逻辑和DynamicList是否在同一个功能组件中？从问题来看，似乎是分开的。或者你能发布你的完整渲染组件吗？
React Hooks useState+useEffect+event gives stale state的可能重复

标签： javascript reactjs framerjs

【解决方案1】：

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

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

【讨论】：