Javascript 组件在React功能组件中的状态更改后未重新呈现

我正在尝试使用另一个文件中的数组创建一个带有React useState的推荐选框类型组件，但我的组件在更改数组后不会重新渲染。每2秒应更换一次

根据我的控制台日志，我的状态正在正确更改。但组件只是没有重新渲染

我的外部数据如下所示：

导出常量证明=[
{
img:“”，
信息：“，
公司：“，
链接：“
},
{
img:“”，
信息：“，
公司：“，
链接：“
},...

不确定它是否没有重新渲染，因为它看起来像这样？这只是一个猜测。 [对象][对象][对象]

const证明=（{classes}）=>{
const[arr，setArr]=使用状态（证明）；
常量递增证明=（arr2）=>{
设el=arr2.shift（）；
arr2.推力（el）；
setArr（arr2）；
console.log（'changed'）；
};
使用效果(
() => {
设置间隔（（）=>{
console.log（'changing'）；
递增证明（arr）；
}, 2000);
},
[arr]
);
返回(
{arr.map（（e）=>(
“{e.info}”

))}
);
};

任何帮助都将不胜感激，

---

谢谢。

直接修改状态是一种不好的做法。相反，如果您有

arr2.length>0

，则可以获取第一个元素。然后使用

.filter（）

可以按索引删除第一个元素。然后使用

setState（）

的回调选项

请尝试以下操作：

const IncrementTestimonials = (arr2) => {
    if (arr2.length > 0) {
       const firstElem = arr2[0];

       const filteredArray = arr2.filter((e, i) => i !== 0);

       setArr(prevArr => filteredArray.concat(firstElem));
    }
};

使用将有一个新阵列，请参阅文档中的：

filter（）

方法创建一个新数组，其中包含通过所提供函数实现的测试的所有元素

---

我希望这会有帮助！

直接修改状态是一种不好的做法。相反，如果您有

arr2.length>0

，则可以获取第一个元素。然后使用

.filter（）

可以按索引删除第一个元素。然后使用

setState（）

的回调选项

请尝试以下操作：

const IncrementTestimonials = (arr2) => {
    if (arr2.length > 0) {
       const firstElem = arr2[0];

       const filteredArray = arr2.filter((e, i) => i !== 0);

       setArr(prevArr => filteredArray.concat(firstElem));
    }
};

使用将有一个新阵列，请参阅文档中的：

filter（）

方法创建一个新数组，其中包含通过所提供函数实现的测试的所有元素

我希望这有帮助！

试试这个

const IncrementTestimonials = () => {
        let arr2 = [...arr]
        let el = arr2.shift();
        arr2.push(el);
        setArr(arr2);
        console.log('changed');
    };

 useEffect(
        () => {
            const timer = setTimeout(() => { // use timeout as after every 2 seconds , your effect will run
                console.log('changing');
                IncrementTestimonials();
            }, 2000);
            return ()=>{
               clearTimeout(timer); 
            }
        },
        [ arr ]
    );

    return (
      {arr.map((e) => (
            <div className={classes.Card}>
               <p>{`${e.info}}`</p> // use string interpolation i.e backticks
             </div>
       ))}
    );

const incrementessentials=（）=>{
设arr2=[…arr]
设el=arr2.shift（）；
arr2.推力（el）；
setArr（arr2）；
console.log（'changed'）；
};
使用效果(
() => {
const timer=setTimeout（（）=>{//使用timeout，因为每隔2秒，效果就会运行
console.log（'changing'）；
递增证明（）；
}, 2000);
return（）=>{
清除超时（计时器）；
}
},
[arr]
);
返回(
{arr.map（（e）=>(
{`${e.info}}`
//使用字符串插值，即倒勾
))}
);

试试这个

const IncrementTestimonials = () => {
        let arr2 = [...arr]
        let el = arr2.shift();
        arr2.push(el);
        setArr(arr2);
        console.log('changed');
    };

 useEffect(
        () => {
            const timer = setTimeout(() => { // use timeout as after every 2 seconds , your effect will run
                console.log('changing');
                IncrementTestimonials();
            }, 2000);
            return ()=>{
               clearTimeout(timer); 
            }
        },
        [ arr ]
    );

    return (
      {arr.map((e) => (
            <div className={classes.Card}>
               <p>{`${e.info}}`</p> // use string interpolation i.e backticks
             </div>
       ))}
    );

const incrementessentials=（）=>{
设arr2=[…arr]
设el=arr2.shift（）；
arr2.推力（el）；
setArr（arr2）；
console.log（'changed'）；
};
使用效果(
() => {
const timer=setTimeout（（）=>{//使用timeout，因为每隔2秒，效果就会运行
console.log（'changing'）；
递增证明（）；
}, 2000);
return（）=>{
清除超时（计时器）；
}
},
[arr]
);
返回(
{arr.map（（e）=>(
{`${e.info}}`
//使用字符串插值，即倒勾
))}
);

arr2只是对您的状态的引用，您不能修改它，您可以这样做：

const IncrementTestimonials = () => {
    const arr2 = [...arr];
    let el = arr2.shift();
    arr2.push(el);
    setArr(arr2);
    console.log('changed');
};

---

arr2只是对您的状态的引用，您不能修改它，您可以这样做：

const IncrementTestimonials = () => {
    const arr2 = [...arr];
    let el = arr2.shift();
    arr2.push(el);
    setArr(arr2);
    console.log('changed');
};

试试这个：

 const IncrementTestimonials = (arr2) => {
      let el = arr2.shift();
      arr2.push(el);
      setArr(JSON.parse(JSON.stringify(arr2)));
      console.log('changed ' + arr[0].company);
  };

试试这个：

 const IncrementTestimonials = (arr2) => {
      let el = arr2.shift();
      arr2.push(el);
      setArr(JSON.parse(JSON.stringify(arr2)));
      console.log('changed ' + arr[0].company);
  };

---

我的初始证明数组是一个对象数组，这有关系吗？不太重要，只是想知道你是在尝试动态获取证明还是已经预填充。是的，它们都预填充在另一个文件中。刚刚更新了我的注释，此更改将强制数组更新数组。arraysMy initi有问题al-Certificational数组是一个对象数组，这有关系吗？不太重要，只是想知道您是在尝试动态获取这些证明，还是已经预填充。是的，它们都预填充在另一个文件中。刚刚更新了我的注释，此更改将强制数组更新数组。数组的变异是一个问题