react的state如何不全量更新

Question

react中在监听输入框的值时，页面内使用的随机图片会变动

在每次输入框输入的时候，背景图都会变化，但我期待的场景是，每次页面刷新后背景图随机变，其他时候不变

这是输入框发生变化后将值赋给value

 <Search
                    value={inputValue}
                    onChange={(e: any) => {
                        let value = e.target.value;
                        setInputValue(value);
                    }}
                />

这里遍历数据，使用随机背景图

 {
                            typeList.map((item: any) => (
                                <SwiperSlide
                                   style={{ backgroundImage: `url(${require(`@assets/images/supervisor/type_back_0${Math.floor(Math.random() * 8) + 1}.png`)}` }}
                                >
                                </SwiperSlide>
                            ))
                        }

Answer 1

const [backgrounds, setBackgrounds] = useState<string[]>([]);

useEffect(() => {
  const backgrounds = typeList.map(() => 
    require(`@assets/images/supervisor/type_back_0${Math.floor(Math.random() * 8) + 1}.png`)
  );
  setBackgrounds(backgrounds);
}, []);

{
  typeList.map((item: any, index: number) => (
    <SwiperSlide
      style={{ backgroundImage: `url(${backgrounds[index]})` }}
    >
    </SwiperSlide>
  ))
}