调用setAttributes后WordPress Blocks API的JSX组件未重渲染

你直接用slides.push()修改了原数组的内容，然后把同一个数组引用传给setAttributes。Gutenberg的状态更新机制依赖于引用变化来检测数据更新，因为原数组的引用没改变，所以组件不会触发重渲染。

创建一个新的数组副本，而不是修改原数组，再把新数组传给setAttributes。可以用ES6的扩展运算符来实现：

const addSlide = () => {
  // 创建新数组，包含原数组所有元素 + 新的slide对象
  const newSlides = [
    ...slides,
    {
      title: "",
      description: "",
      media: [],
    }
  ];

  setAttributes({ slides: newSlides });
};

• 数组渲染时要给每个元素加唯一的key属性，避免React的渲染警告，比如可以用索引或者给每个slide加唯一id：

  {slides.map((slide, index) => (
    <div className="hero-slide" key={index}>
      {/* 其他内容 */}
    </div>
  ))}
  

• 代码里的onChangeContent、onSelectImage、mediaID这些变量/函数目前未定义，后续需要补充实现，避免运行报错。

内容的提问来源于stack exchange，提问作者franka