Javascript 在状态对象内更改数组时不重新渲染

我有这样一种状态：

const [data, setData] = useState[{name:"abc", gender: "male", experience: ["a","b","c"]}];

我有一个显示经验的功能

const display= () => {
  let items = data.experience;
  return items.map((val,ind) => {
    return(<li key={ind}>{val}</li>);
  });
}

---

试试这个-你可以这样删除

export default function App() {
  const [data, setData] = React.useState({
    name: "abc",
    gender: "male",
    experience: ["a", "b", "c"]
  });
  const deleteIt = id => {
    let filtered = data.experience.filter(filt => filt !== id);
    setData({
      ...data,
      experience: filtered
    });
  };
  return (
    <div className="App">
      <ul>
        {data.experience.map(d => (
          <li key={d} onClick={() => deleteIt(d)}>
            <h3>{d}</h3>
          </li>
        ))}
      </ul>
    </div>
  );
}

导出默认函数App（）{
const[data，setData]=React.useState({
名称：“abc”，
性别：“男性”，
经验：[“a”、“b”、“c”]
});
const deleteIt=id=>{
让filtered=data.experience.filter（filt=>filt！==id）；
设置数据({
…数据，
经验：过滤
});
};
返回(

{data.experience.map（d=>(
deleteIt（d）}>
{d}

))}

);
}

---

如何删除阵列？如果要使用splice删除索引。 有时，在数组中的实际数据更改之前调用setState会出现这种情况，所以尝试在该操作（如setTimeout）稍有延迟后调用setState

setTimeout(function(){
  // call your setState here with new data
}, 1000);

---

我已经解决了，问题是在删除功能中：

const deleteExperience = (ind) => { 
    let newData = data;
    let experiences = newData.experience.filter((val, id) => id !== ind); 
    newData.experience = experiences;
    setData(newData); 
};

校正（应使用对象排列）as=符号不会创建新数组，但会创建对原始数组的引用：

const deleteExperience = (ind) => { 
    let newData = {...data};
    let experiences = newData.experience.filter((val, id) => id !== ind); 
    newData.experience = experiences;
    setData(newData); 
};

---

我可以删除，我的问题是状态正在更新，但组件没有重新启动-rendering@FahadMahmood你的更新功能不对，我想。。。共享您的删除功能code@FahadMahmood您需要更新内部状态以重新提交组件…不要直接改变状态。参考这个是的，它是固定的，我使用=来进行数组克隆我已经固定了，问题是在delete函数中：```const deleteExperience=（ind）=>{let newData=data；let experiences=newData.experience.filter（（val，id）=>id！==ind）；newData.experience=experiences；setData（newData）；}；``更正（应使用对象排列）：````constdeleteExperience=（ind）=>{let newData={…data}；let experiences=newData.experience.filter（（val，id）=>id！==ind）；newData.experience=experiences；setData（newData）；}````如果这解决了您的问题，请添加您的评论作为您问题的答案，并接受作为答案。

const deleteExperience = (ind) => { 
    let newData = {...data};
    let experiences = newData.experience.filter((val, id) => id !== ind); 
    newData.experience = experiences;
    setData(newData); 
};