import React, { useState, useEffect } from 'react'
// import './04demo.css';
import axios from 'axios'
function Father() {
//定义State为数组，setState是获得的数据
const [Statearr, setStatearr] = useState([])//name
const [countarr, setCountarr] = useState([])//username
const [Emailarr, setEmailarr] = useState([])//email
const [Addressarr, setAddressarr] = useState([])//address
const [isName, setIsName] = useState(true)
useEffect(() => {
//fetch请求数据
axios("https://jsonplaceholder.typicode.com/users")
//fetch()返回一个promise，在.then方法里面处理，此时，我们还没有获得所需要的json格式的数据，
//所以在response对象上调用.json()方法，这将返回另一个以json格式数据resolve的promise，所以fetch请求包含两个promise。
// .then((res) => res.json())
// .then(data => {
// console.log(data);
//对于Axios，响应数据默认为JSON。响应数据在response对象的data属性上。
.then(response => {
console.log(response.data)
let list1arr = response.data.map((post) => {
return post.name
});
let list2arr = response.data.map((post) => {
return post.username
});
let list3arr = response.data.map((post) => {
return post.email
});
let list4arr = response.data.map((post) => {
return post.address
});
//打印list
console.log(list2arr)
console.log(list4arr)
//将list赋值给setState
setStatearr(list1arr)
setCountarr(list2arr)
setEmailarr(list3arr)
setAddressarr(list4arr)
})
//使用 catch() 去捕获错误
.catch(err => console.log(err));
}, [])
let xxx = isName ? Statearr : countarr
console.log(xxx)
console.log(Addressarr)
//sortName函数，以及字符串的排序方法localeCompare
const sortName = () => {
const data = [...Statearr.sort((a, b) => a.localeCompare(b))];
setStatearr(data);
}
//更改颜色
const [isClicked, setIsClicked] = useState(true);
const changeToArbitraryColor = () => {
document.body.style.backgroundColor =
"#" + Math.floor(Math.random() * 16777215).toString(16);
setIsClicked(!isClicked);
};
return (
<div>
{xxx.map(namearr => { return <Son value={namearr} key={namearr} /> })}
<div
className={document.body.style.backgroundColor}
style={{
display: "flex",
flexDirection: "column",
backgroundColor: 'green'
}}>
{Addressarr.map(address => { return <div key={address.city}>{address.city} </div> })}
</div>
{Emailarr.map(Emailarr => { return <Son value1={Emailarr} key={Emailarr} /> })}
<button onClick={() => { setIsName(!isName) }}>name更换username</button><hr />
<button onClick={() => sortName()} >对name排序</button >
<button onClick={changeToArbitraryColor}>
更换背景颜色
</button>
</div>
)
}
function Son(props) {
return (
<div >
<div
style={{
display: "flex",
flexDirection: "column",
backgroundColor: 'skyblue'
}}
>
{props.value}
</div>
<div style={{
display: "flex",
flexDirection: "column",
backgroundColor: 'red'
}}>
{props.value1}
</div>
</div>
)
}
export { Father, Son }
