reactjs - 当在另一个组件中更新所述上下文时,如何通过 useContext 在组件中触发重新渲染
问题描述
我正在尝试使用来自 API 的响应来更新表。响应来自一个组件,而表格位于另一个组件中。我可以看到我成功地更新了组件中的上下文,但它似乎没有传递给其他人。我尝试更新上下文,然后通过道具钻孔传递它,但这也不起作用。如何获取包含表以侦听上下文更改的组件?我的组件的代码如下:
更新上下文的组件:
import React, { useState, useContext } from 'react';
import { Card } from 'react-bootstrap';
import axios from 'axios';
import Cd from './types/Cd';
import Bond from './types/Bond';
import AssetContext from '../../context/AssetContext';
const fixedCard = (props) => {
const [fixed, setFixed] = useContext(AssetContext);
const [bond, setBond] = useState(false);
const assets = fixed;
const getResult = (event) => {
const form = event.currentTarget;
event.preventDefault();
event.stopPropagation();
let principle = form.principle.value;
const iLength = form.investmentLength.value / 12;
let compound = form.compound.value
let rate = form.rate.value;
let amount;
if (form.amount) {
amount = form.amount.value;
principle = principle * amount;
}
if (isNaN(rate) || rate < 0) {
alert("As much fun as it would be to calculate the result with \"" + rate + "\", it can't be done. Please enter a valid number");
} else {
if (compound === "Monthly") {
compound = 12;
} else if (compound === "Annually") {
compound = 1;
} else if (compound === "Quarterly") {
compound = 4;
} else {
compound = 365;
}
const headers = {
'Content-type': 'application/json',
'Access-Control-Allow-Origin': 'localhost:3000/',
'Access-Control-Allow-Methods': 'POST',
}
const body = {
principle: principle,
interestRate: rate,
length: iLength,
compoundFrequency: compound
}
axios.post("http://localhost:8080/compound-calculator/savings", body, { headers })
.then(res => {
assets.push(res.data);
setFixed(assets);
fixed.map(asset => console.log(asset));
});
}
}
const linkCursor = { cursor: 'pointer' }
const toggleBond = () => {
setBond(true);
}
const toggleCert = () => {
setBond(false);
}
return (
<Card body>
<Card.Title>
Compount interest calculator
</Card.Title>
<Card.Link onClick={() => toggleCert()} style={linkCursor}>Certificate</Card.Link>
<Card.Link onClick={() => toggleBond()} style={linkCursor}>Bond</Card.Link>
<hr></hr>
<br></br>
{!bond && <Cd getResult={getResult} />}
{bond && <Bond getResult={getResult} />}
<br></br>
</Card>
);
}
export default React.memo(fixedCard);
根组件:
import React, { useState, useEffect } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import './GrowthCalculator.css';
import { Container, CardDeck } from 'react-bootstrap';
import FixedCard from '../components/fixedAssets/FixedCard';
import StockCard from '../components/StockCard';
import ResultCard from '../components/ResultCard';
import Navigation from '../components/Navigation';
import AssetContext from '../context/AssetContext.js';
import HowTo from '../components/HowTo';
const growthCalculator = (props) => {
const [fixedState, setFixedState] = useState([]);
const [stockState, setStockState] = useState([]);
const assets = [fixedState, setFixedState, stockState, setStockState];
return (
<main>
<AssetContext.Provider value={[...assets]}>
<Container>
<br></br>
<Navigation />
</Container>
<br></br>
<CardDeck>
<FixedCard /> //context updated here
<StockCard />
<ResultCard /> //trying to pass it here
</CardDeck>
<br></br>
<HowTo />
</AssetContext.Provider>
</main>
);
}
export default React.memo(growthCalculator);
我试图将其传递给的组件(此处的布局仍在进行中):
import React, { useContext, useState } from 'react';
import { Card, Row, Col, Table } from 'react-bootstrap';
import AssetContext from '../context/AssetContext';
const resultCard = (props) => {
// eslint-disable-next-line
const [fixed, setFixed, stocks, setStocks] = useContext(AssetContext);
return (
<Card body>
<Card.Title>
Result card
</Card.Title>
<br></br>
<hr></hr>
<br></br>
<section>
<Row>
<Col>
<Table striped borderless hover size="sm" variant="secondary" responsive>
<thead>
<tr>
<th>
Compounding assets
</th>
</tr>
</thead>
<tbody>
//This doesn't render anything when fixed is updated in FixedCard.js
{fixed.map(asset => (
<tr>
<td>
${asset.principle}
</td>
<td>
total: ${asset.endValue}
</td>
</tr>))
}
</tbody>
</Table>
</Col>
<Col>
<Table striped borderless hover size="sm" variant="secondary" responsive>
<thead>
<tr>
<th>
Stocks
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Ticker
</td>
<td>
Fair price
</td>
<td>
Discount price
</td>
</tr>
</tbody>
</Table>
</Col>
</Row>
</section>
</Card>
);
}
export default resultCard;
重申我的问题,如何让 resultCard 监听 AssetContext 的变化?
谢谢
解决方案
要听取更改然后实施更改,我所做的是使用 useEffect,我必须听取更改并进行更改。例如,您可以将来自 api 的传入响应作为道具传递给组件。在子组件中,您可以像这样使用 useEffect
useEffect(() => {
code here or change states, whichever you need to do
})
}, [props.responseIncomingFromParent])
让我知道这个是否奏效...
推荐阅读
- flutter - Flutter 应用发布构建挂起调用 getApplicationDocumentsDirectory();
- python - 使用不区分大小写的 Pandas str.contains
- javascript - 任何 babel 插件可以删除不必要的分配?
- php - 缺少页面重定向器 Laravel 实现 Redirector
- microsoft-teams - 在 Microsoft Teams 的 Adaptive Card 中使用 Action.OpenUrl 触发电话(电话或 sip)
- node.js - 使用 apt get 安装包到无服务器 node.js 应用程序
- django - 为什么 Django Rosetta 不翻译所有内容?缺少一些字符串
- webpack - Webpack 5 并支持 UNC 路径作为输出?
- python - 打开CMD并在bash命令后执行linux命令
- python - 默认情况下将小数字显示为百分比