例如-输入值更改后的组件重新应答?如何纠正

Question

实际上，我正在通过单击submit Click按钮并在数组名称biodata中推动该对象，并根据对象的跟随者数量对数组acc进行排序来影响对象(在useeffect((中(问题是，在我对输入框进行一些更改之前，它不会呈现排序后的数组从"React"导入React从"react"导入｛useState，useEffect｝

import axios from 'axios';
function Search(){
const [searchkeyword,inputchange] = useState("");
const [biodata,setbiodata] =useState([]);
const load=(e)=>{
axios.get(`https://api.github.com/users/${searchkeyword}`).
then((response)=>setbiodata((biodata)=>[...biodata,response.data])).catch((err)=>console.log(err.message))
e.preventDefault();
}
function compare( a, b ) {
if ( a.followers > b.followers ){
return -1;
}
if ( a.followers < b.followers ){
return 1;
}
return 0;
}
useEffect(()=>{

document.getElementById("myform").reset()
biodata.sort(compare);
setbiodata(biodata)
console.log("cahnge")

},[biodata])
return(
<div>
<form id="myform">
<input type="text" id="a" onChange={(e)=>{inputchange(e.target.value)}} ></input>
<button type="submit" onClick={load}>Click</button>
</form>
{ biodata.length>0  &&
biodata.map((e)=>{
return(
<div key={e.id}> 
<p>{e.login}</p>
<p>{e.followers}</p>
</div>
);
})
}
</div>
);
}

export default Search;

Answer 1

当它渲染已排序的数组时，它实际上已排序吗？我现在不能测试它，但你可能想改变你的用途效果：

document.getElementById("myform").reset()
const sortedBioData = biodata.sort(compare);
setbiodata(sortedBioData)
console.log("cahnge")

请注意，在useEffect中更改生物数据状态可能会导致中心体状态循环