无法在使用React单击按钮时更新UI中的详细信息

Question

我在表中有名字，所以现在我想反转名字(反转字符串)，我想更新UI中的名字所以，我有一个函数来逆转表中的名称，它工作得很好，当我控制台记录它时，我得到了颠倒的名称…但我无法在UI中更新…有人能帮我一下吗?提前感谢

const Arraymethods1 = () => {
const [data, setdata] = useState([]);
const [getData, setgetData] = useState([{}]);

useEffect(() => {
Axios.get('http://localhost:3000/results').then(res =>{
setdata(res.data);
const tempArray=[];
let allData =res.data;
//console.log(allData);
for(let i=0;i<allData.length;i++){
//console.log(allData[i])
const dataObject ={
name : `${allData[i].name.first}-${allData[i].name.last}`,
price : allData[i].price.money.wealth
}
// console.log(dataObject);
tempArray.push(dataObject);
//console.log(tempArray);
}
setgetData(tempArray);
})
}, [])

这个函数是用来恢复

名称的。

const RevereName =() =>{
//console.log(getData);
for(let i=0;i<getData.length;i++){
let reversing =getData[i].name;
//console.log(reversing);
let rev ="";
for(let i=reversing.length-1;i>=0;i--){
rev+=reversing[i];

}
console.log(rev);
setgetData([rev]);

}
}
return (
<React.Fragment>
<h1 className="text-info m-3 true">LordShiva</h1>
<div className="container">
<div className="card">
<div className="row">
<div className="col md-col-4">
<div className="card-header font-weight-bold text-centre getsome">ArrayButtons</div>
<div className="bg-dark text-centre">
<button className="btn btn-warning" onClick={RevereName}  >Reverse</button>
</div>
</div>
<div className="col md-col-6">
<div className="card-header font-weight-bold text-centre getsome">ArrayValues</div>
<div className="table bg-dark">
{/* <p className="text-primary font-weight-bold p-3 md-col-6 shaping">Person</p>
<p className="text-primary font-weight-bold p-3  md-col-6 shape">Wealth</p> */}
<table className="table">
<thead className="text-primary p-3 shaping ">
<tr>
<th><strong>Person</strong></th>
<th><strong>Wealth</strong></th>
</tr>
</thead>
<tbody>
<div className="text-primary">
<tr>
{
getData.map((user)=>{
return (
<div>
<td className="font-weight-bolder text-capitalize">{user.name}</td>
<td className="font-weight-bolder treu">{user.price}</td>
</div>               
)
})
}
</tr>
</div>
</tbody>
<p className="text-primary font-weight-bolder p-3" ><strong>Total Wealth</strong>{total}</p>
</table>
</div>
</div>
</div>
</div>
</div>
</React.Fragment>
)
}

Answer 1

getData是一个对象数组，而不是字符串数组。如果将其设置为字符串数组，则user.name和user.name。价格未定。

所以一个修正是

const RevereName=()=>{
let getData2=[];
for(let i=0;i<getData.length;i++){
let reversing =getData[i].name;
//console.log(reversing);
let rev ="";
for(let i=reversing.length-1;i>=0;i--){
rev+=reversing[i];

}
console.log(rev);
getData2.push({name: rev, price: getData[i].price});
}
setgetData([...getData2]);
}