时间戳

首页 > 解决方案 > 更新子组件内部状态时如何重新渲染子组件

javascript - 更新子组件内部状态时如何重新渲染子组件

问题描述

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

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

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;

标签： javascriptreactjsreact-hooks

解决方案

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

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

推荐阅读