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

Question

我有这样的状态：

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>);
  });
}

如果我删除了一个经验值，我的状态会随着新项目数组的变化而变化，但我的组件没有更新项目，我该如何解决这个问题

删除功能：（它工作正常并且状态改变，但组件没有重新渲染新状态）

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

Answer 1

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

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>
  );
}

现场工作演示

Answer 2

你是如何删除数组的？ 如果您使用 splice 删除索引。 有时会发生这种情况，您在数组中的实际数据更改之前调用 setState，因此尝试在对该操作（如 setTimeout）稍作延迟后调用 setState

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

Answer 3

我已经修复它，问题出在删除功能上：

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); 
};