我正在尝试创建一个自定义列表(替代使用ListTile小部件)。
我的代码如下所示:
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.symmetric(vertical: 10.0),
child: SizedBox(
height: 70,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
thumbnail,
Expanded(
child: Padding(
padding: EdgeInsets.fromLTRB(10.0, 0.0, 2.0, 0.0),
child: CommentDescription(
author: author,
comment: comment,
createdAt: createdAt,
isLiked: isLiked,
likesCount: likesCount,
)
)
),
menu
],
)
)
);
}
Run Code Online (Sandbox Code Playgroud)
评论描述小部件
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Expanded(
flex: 2,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'$author',
maxLines: 1,
style: TextStyle(fontWeight: FontWeight.bold) …Run Code Online (Sandbox Code Playgroud) 我想通过在reactjs中使用axios将数据从客户端发送到服务器端并在服务器端使用laravel处理图像上传来将多个图像上传到数据库。我的问题是,每当我尝试在服务器端处理多个图像时,它都不起作用。
这是我的代码。
客户端(ReactJS)
构造器:
constructor(props){
super(props);
this.state = {
id: "upload-photo",
imageArray: [],
body: '',
posts: [],
// image: []
};
this.handleSubmit = this.handleSubmit.bind(this);
this.handleBodyChange = this.handleBodyChange.bind(this);
}
Run Code Online (Sandbox Code Playgroud)
HanleFileChange:
handleFileChange(e){
if (e.target.files) {
const files = Array.from(e.target.files);
const promises = files.map(file => {
return (new Promise((resolve, reject) => {
const reader = new FileReader();
reader.addEventListener('load', (ev) => {
resolve(ev.target.result);
});
reader.addEventListener('error', reject);
reader.readAsDataURL(file);
}))
});
Promise.all(promises).then(images => {
this.setState({
imageArray: images
})
}, error => { console.error(error); });
}
if …Run Code Online (Sandbox Code Playgroud) 我试图在使用 ReactJS 和FileReader()API 将多个图像上传到服务器之前在浏览器中预览它们。然而,我遇到的问题是每次我选择一些图像进行预览时,只显示最后一个图像。
我的代码如下所示:
class App extends Component {
constructor(props){
super(props);
this.state = {
id: "upload-photo",
imageURI: null
}
}
buildImgTag(){
let imgTag = null;
if (this.state.imageURI !== null) {
imgTag = (
<div className="photo-container">
<img className="photo-uploaded" src={this.state.imageURI} alt="Photo uploaded"/>
</div>
);
return imgTag;
}
}
readURI(e){
if (e.target.files) {
let filesAmount = e.target.files.length;
let i;
for (i = 0; i < filesAmount; i++) {
let reader = new FileReader();
reader.onload = function(ev) {
this.setState (
{ …Run Code Online (Sandbox Code Playgroud) 我正在尝试更新 React 状态中数组的索引。问题是我无法使用setState()方法访问数组的索引。
我的代码如下所示:
handleLike(post) {
axios.get(`/likes/${post}`)
.then(response => {
this.state.posts.forEach((entry, index) => {
if (entry.id === post) {
this.setState({posts[index]: response.data})
}
})
})
}
Run Code Online (Sandbox Code Playgroud)
我希望使用响应数据更新数组内容,但它会引发错误。如何在 React 状态下更新数组的索引?