更新子组件内的 state 时如何重新渲染子组件

Question

我只是在学习反应并尝试创建一个简单的项目，我有一个按钮，当单击它时，它会根据用户年龄对来自 API 的数据进行排序，当我控制台记录 state 时，数据可能排序为我想要的唯一问题是更新 state 后组件不会重新渲染。

如果代码中还有其他错误，也请告诉我，您的帮助非常适合。

 const Test = () => { const [state, setState] = useState([]); useEffect(() => { const fetchApi = async () => { setState(await fetchUsersData()) } fetchApi() },[setState]) const info = state.map((data, i) => { return (<div key={i}> <p >{data.users}</p> <p >{data.ages}</p> </div>) }) const sortByAge = () => state.sort((a, b) => { return a.age < b.age? 1: -1 }) const handleClick = () => { setState(sortByAge()) } return ( <div> <button onClick={handleClick}>Sort by Age</button> {info} </div> ); } export default Test;

Answer 1

您的问题是您在进行排序时正在变异 state 。 应用排序时尝试做一个浅拷贝：

const sortByAge = () => [...state].sort((a, b) => {
  return a.age < b.age ? 1: -1
})