javascript - 上下文提供程序中的 componentDidMount() 状态更改未触发子组件的重新渲染
问题描述
这是我的代码。一直试图让它工作4天。从函数组件到类组件,再到介于两者之间的所有东西,我都尝试过。不知所措。我无法在构造函数中正确设置状态,因为它是异步的,但是在放入 componentDidMount() 时它不会重新渲染
编辑:是的,我知道有些代码是多余的。我对其进行了更改以隔离错误并删除了 addParams() 逻辑以及其他一些东西。
import React, { Component } from "react";
import axios from "axios";
export const ListContext = React.createContext();
class ListContextProvider extends Component {
constructor() {
super();
this.state = { cards: {}, params: {} };
}
addParams(parameters) {
return parameters;
}
getCards() {
let parameters = this.addParams({ last_name__icontains: "smith" });
console.log(parameters);
axios({
method: "get",
url: "http://127.0.0.1:8000/charges/cardsapi/",
params: parameters,
}).then((response) => {
let cards = Object.values(response.data.results);
let cardsState = Object.assign({}, cards);
this.setState({ cards: cardsState });
console.log(this);
console.log(this.state);
});
}
componentDidMount() {
console.log("mounted");
this.getCards();
}
render() {
return (
<ListContext.Provider value={this.state}>
{this.props.children}
</ListContext.Provider>
);
}
}
export { ListContextProvider };
然后是消费者:
export default function DataTable(context) {
let cards = context;
const rows = [];
const headerCells = [];
if (cards.length > 1) {
for (let field in cards[0]) {
headerCells.push(<TableCell key={field}>{field}</TableCell>);
}
for (let row of cards) {
const cells = [];
for (const [key, value] of Object.entries(row)) {
cells.push(<TableCell key={key}>{value}</TableCell>);
}
rows.push(<TableRow key={cells[0].props.children}>{cells}</TableRow>);
}
return (
<Table>
<TableHead>
<TableRow key={"header"}>{headerCells}</TableRow>
</TableHead>
<TableBody>{rows}</TableBody>
</Table>
);
} else {
return (
<Table>
<tbody>
<tr>
<td>Empty</td>
</tr>
</tbody>
</Table>
);
}
}
解决方案
这有效:
import React, { Component } from "react";
import axios from "axios";
let ListContext = React.createContext();
class ListContextProvider extends Component {
constructor() {
super();
this.state = { cards: [], params: {} };
}
addParams(parameters) {
this.setState({ params: parameters });
}
getCards() {
let parameters = this.state.params;
console.log(parameters);
axios({
method: "get",
url: "http://127.0.0.1:8000/charges/cardsapi/",
params: parameters,
}).then((response) => {
let cardsState = Object.values(response.data.results);
this.setState({ cards: cardsState });
});
}
async componentDidMount() {
await this.addParams({ last_name__icontains: "shaer" });
console.log("mounted");
this.getCards();
}
render() {
return (
<ListContext.Provider value={this.state}>
{this.props.children}
</ListContext.Provider>
);
}
}
export { ListContextProvider, ListContext };
推荐阅读
- node.js - NestJS - 无法将服务注入订阅者
- flutter - 使用 StreamBuilder 制作动画
- python - 在 ttk 进度条中显示百分比
- r - 闪亮应用程序中的选项卡名称之间没有空格
- ruby-on-rails - 如何从发布请求中重定向 Rails
- vue.js - VueJS + Vue.Draggable + Vuex Store + 计算变量
- html - 如何单击按钮并使用按钮所在项目的项目 ID 将其发送到另一个视图。Laravel - vue.js - 惯性 vue
- liferay - 我们如何以编程方式在 Liferay 中为用户和站点模板创建角色、权限?
- python - 如何使用 CPLEX Solver 定义具有 3d 成本矩阵的 CVRP 目标函数?
- python - 具有本地化日期时间索引的数据框:如何删除没有给定时间的日期