react中怎么更改样式（让我的组件变成最后一个图的效果）
我的数据是通过api请求回来的json格式，还用了flex布局，所以不知道怎么变成最后一个图的效果
问题相关代码，
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)
const [all, setall] = useState([])//data
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(list4arr)
//将list赋值给setState
setStatearr(list1arr)
setCountarr(list2arr)
setEmailarr(list3arr)
setAddressarr(list4arr)
setall(response.data)
})
//使用 catch() 去捕获错误
.catch(err => console.log(err));
// document.body.style.backgroundColor =
// "#" + Math.floor(Math.random() * 16777215).toString(16);
}, [])
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);
}
console.log(all)
return (
<div>
{xxx.map(namearr => { return <Son value={namearr} key={namearr} /> })}
<div >
{all.map(all => {
return (
<div
key={all.id}
style={{
width: "100%",
height: "50px",
display: "flex",
backgroundColor:"skyblue",
justifyContent: "space-between"
}}
>
<div
style={{
alignSelf: "flex-start",
}}
>名字：{all.name}</div>
<div
style={{ alignSelf: "center",
}}
>邮箱：{all.email}</div>
<div
style={{
alignSelf: "flex-end",
}}
>城市：{all.address.city} </div>
</div>
)
})
}
{/* {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 >
</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 }
我现在的效果
我想要达到的结果
你的数据 结构有问题 EmailArr 应该是一个 数组 对象
[{name:"",city:"",color:""}]这样 然后 。son里 style ： item.color即可
给 all里 加color属性也行
你这个颜色 是固定的还是 随机的？
随机的话 就是
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)
const [all, setall] = useState([])//data
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(list4arr)
//将list赋值给setState
setStatearr(list1arr)
setCountarr(list2arr)
setEmailarr(list3arr)
setAddressarr(list4arr)
setall(response.data)
})
//使用 catch() 去捕获错误
.catch(err => console.log(err));
// document.body.style.backgroundColor =
// "#" + Math.floor(Math.random() * 16777215).toString(16);
}, [])
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 color16=()=>{//十六进制颜色随机
var r = Math.floor(Math.random()*256);
var g = Math.floor(Math.random()*256);
var b = Math.floor(Math.random()*256);
var color = '#'+r.toString(16)+g.toString(16)+b.toString(16);
console.log(color)
return color;
}
// console.log(all,Emailarr)
return (
<div>
{xxx.map(namearr => { return <Son value={namearr} key={namearr} /> })}
<div >
{all.map(all => {
return (
<div
key={all.id}
style={{
width: "100%",
height: "50px",
display: "flex",
backgroundColor:color16(),
justifyContent: "space-between"
}}
>
<div
style={{
alignSelf: "flex-start",
}}
>名字：{all.name}</div>
<div
style={{
alignSelf: "center",
}}
>邮箱：{all.email}</div>
<div
style={{
alignSelf: "flex-end",
}}
>城市：{all.address.city} </div>
</div>
)
})
}
{/* {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 >
</div >
)
}
