javascript - 如何将值从状态传递到另一个组件
问题描述
我的反应应用程序上有两个页面。一页允许您提交帖子,第二页显示所有帖子。我需要能够从一页上的状态中检索数据,但我收到一个错误。我做错了什么来显示这个,因为我认为我可以使用道具从我的帖子页面收集状态。
我的显示帖子页面:
import React from 'react';
import './App.css';
export default class Scroll extends React.Component {
render() {
return (
<div className="flex-container">
<div className="post">
{this.props.displayPost(this.props.state.posts)}
</div>
</div>
);
}
}
我的帖子页面:
import React from 'react';
import axios from 'axios';
import './App.css';
import { post } from '../../routes/routes';
export default class PersonList extends React.Component {
state = {
title: "",
body: "",
posts: []
};
componentDidMount = () => {
this.getPost();
}
getPost = () => {
axios.get("http://localhost:5000/posts/save")
.then((response) => {
const data = response.data;
this.setState({ posts: data });
console.log("Data has been recieved")
})
.catch(() => {
alert("Error recieving data")
})
}
handleChange = (event) => {
const target = event.target;
const name = target.name;
const value = target.value;
this.setState({
[name]: value
})
};
submit = (event) => {
event.preventDefault();
const payload = {
title: this.state.title,
body: this.state.body,
}
axios({
url: 'http://localhost:5000/posts/save',
method: 'POST',
data: payload,
})
.then(() => {
console.log('Data sent to the server');
})
.catch(() => {
console.log('Internal server error');
});
};
displayPost = (posts) => {
if (!post.length) return null;
return posts.map((post, index) => {
<div key={index}>
<h3 id="post-text">{post.title}</h3>
<p id="post-text">{post.body}</p>
</div>
});
}
render() {
console.log("State ", this.state)
return (
<div className="flex-container-home">
<div className="app">
<form onSubmit={this.submit}>
<input
placeholder="title"
type="text"
name="title"
value={this.state.title}
onChange={this.handleChange}
/>
<textarea placeholder="description"
name="body"
cols="30" rows="10"
value={this.state.body}
onChange={this.handleChange}
>
</textarea>
<button>Submit</button>
</form>
</div>
</div>
)
}
}
解决方案
这是工作示例:
import React from "react";
export default class PersonList extends React.Component {
state = {
title: "",
body: "",
posts: [],
};
componentDidMount = () => {
this.getPost();
};
getPost = () => {
this.setState({ posts: ["post1", "post2", "post3"] });
};
displayPost = (posts) => {
if (!posts || !posts.length) return null;
return posts.map((post, index) => (
<div key={index}>
<p>{post}</p>
</div>
));
};
render() {
return (
<div className="App">
<Scroll displayPost={this.displayPost} posts={this.state.posts} />
</div>
);
}
}
class Scroll extends React.Component {
render() {
return (
<div className="post">
Posts: {this.props.displayPost(this.props.posts)}
</div>
);
}
}
推荐阅读
- c++ - Qt MacOs 应用程序在退出时使用 dyld::fastBlindLazySymbol 和 sold_stub_binder 崩溃
- c++ - 从给定的二维点计算 SIFT 描述符
- python - 如何评估字典键是否在字符串中
- c - getchar() 时输入回车键;被执行
- json - 如何解码并格式化标记的 LocalDateTime 值
- vue.js - v-dialog 上的内容类不显示自己的样式
- angular - Ionic 4 和 Angular 5 离子按钮颜色和属性不起作用
- python - 将转义字符 (\n) 添加到字符串元组中的最后一个元素
- scala - Spark scala完全连接在连接列上输出null
- python - `exec` 是 Scheme 的 `apply` 的 Python 对应项吗?