React 视图不会在状态更改时更新

我有一个要渲染的名称列表。该列表由搜索输入过滤，但也由gender_id 过滤。

问题是，当我更新数组中对象的 saved_id 时，视图不会改变。我的子组件有一个按钮，如果 saved_id 为 1，则输出“Save”，如果 saved_id 为 2，则输出“Remove”。我可以在更新状态后控制台.log 'names'- 和 'searchFilteredNames'-arrays，并且都得到更新。但是我使用 .map() 来呈现列表的 const'genderFilteredNames' 由于某种原因没有捕捉到变化......为什么会这样？

父组件（带名称的表）：

export default function Names(props) {
/* Raw list */
const [names, setNames] = useState([]);

/* Search filtered list */
const [searchFilteredNames, setSearchFilteredNames] = useState([...names]);

/* Gender filter */
const [genderFilter, setGenderFilter] = useState(1);

/* Show only names where gender_id is equal to gender filter AND status === 1 */
const genderFilteredNames = searchFilteredNames.filter((name) => {
  return name.status_id === 1 && name.gender_id === genderFilter;
});

/* Get names from Database on render */
useEffect(() => {
  getNames();
}, []);

/* Update search-filtered array on root array update */
useEffect(() => {
  setSearchFilteredNames(names);
}, [names]);

/* Get names */
function getNames() {
  axios.get("http://localhost:3001/select").then((response) => {
    setNames(response.data);
  });
}

/* Update object in array */
function updateSave(id, savedId) {
  // Make copy of original array
  let newNames = [...names];

  // Get index of object to update
  for (var index = 0; index < names.length; index++) if (names[index].id === id) break;

  // Update object value
  newNames[index].saved_id = savedId;

  // Set the state to new copy
  setNames(newNames)
}

/* Render names */
function renderNames() {
  return genderFilteredNames.map((name) => (
    <Name
      key={name.id}
      id={name.id}
      name={name.name}
      saved={name.saved_id}
      gender_id={name.gender_id}
      use={() => handleUse(name.id)}
      save={() => handleSave(name.id)}
    />
  ));
}
...

子组件（单行）：

export default function Name(props) {
  const [name, setName] = useState(props.name);
  const [saved, setSaved] = useState(props.saved);
  const useFn = props.use;
  const saveFn = props.save;

  function savedStatus() {
    return saved === 1 ? <>Save</> : <>Remove</>;
  }

  return (
    <>
      <tr>
        <td>{name}</td>
        <td className="actions-2">
          <button className="btn btn-tan" onClick={useFn}>
            <FaRegEdit />
            Use
          </button>

          <button className="btn btn-tan" onClick={saveFn}>
            <GiSaveArrow />
            {savedStatus()}
          </button>
        </td>
      </tr>
    </>
  );
}