Reactjs 从API返回的结果不会显示在React引导表中

我确信我遗漏了一些明显的东西，但我无法从API返回的结果显示在我的表中。state变量映射到控制台，但不会显示在表中。我将组件移动到同一个文件中，以消除将状态不正确地发送到子组件的可能性，但情况似乎并非如此。我的代码如下：

import React, { useState, useEffect } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import './GrowthCalculator.css';
import { Container, CardDeck, Card, Row, Col, Badge, Table } from 'react-bootstrap';
import axios from 'axios';

import FixedCard from '../components/fixedAssets/FixedCard';
import StockCard from '../components/stocks/StockCard';
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];
    
    let stocks = stockState;
    let fixed = fixedState;

    useEffect(() => {
        stocks = stockState;
        fixed = fixedState;
        //Would useRef() fix my issue?
    }, [fixedState, stockState]);

    const getResult = (event) => {
        const form = event.currentTarget;
        event.preventDefault();
        event.stopPropagation();

        const assets = fixedState;

        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,
                iLength: iLength,
                compoundFrequency: compound
            }

            axios.post("http://localhost:8080/compound-calculator/savings", body, { headers })
                .then(res => {
                    assets.push(res.data);
                    setFixedState(assets);
                    fixedState.map(asset => console.log(asset));
                });

        }
    }

    const getStockPrice = (event) => {
        const form = event.currentTarget;
        event.preventDefault();
        event.stopPropagation();

        const roi = form.roi.value;
        const mos = form.mos.value;
        const equity = form.equity.value * 1000;
        const shares = form.shares.value * 1000000;

        if (roi <= 0) {
            alert("You probably don't want to make nothing on your investment");
        } else if (mos < 0 || mos > 50) {
            alert("Margin of safety must be between 0 (I don't recommend this) and 50");
        } else if (shares <= 0) {
            alert("Are you sure that's the correct number of shares?");
        } else {

            const headers = {
                'Content-type': 'application/json',
                'Access-Control-Allow-Origin': 'localhost:3000/',
                'Access-Control-Allow-Methods': 'POST',
            }

            let body;

            if (form.fcf1) {
                let fcf1; let fcf2; let fcf3; let fcf4; let fcf5;

                fcf1 = form.fcf1.value;
                fcf2 = form.fcf1.value;
                fcf3 = form.fcf1.value;
                fcf4 = form.fcf1.value;
                fcf5 = form.fcf1.value;

                const fcf = [fcf5, fcf4, fcf3, fcf2, fcf1];

                body = {
                    desiredReturn: roi,
                    currentEquity: equity,
                    marginOfSafety: mos,
                    shares: shares,
                    freeCashFlow: fcf
                }

                axios.post("http://localhost:8080/compound-calculator/stock-fcf", body, { headers })
                    .then(res => {
                        stocks.push(res.data);
                        setStockState(stocks);
                        stockState.map(asset => console.log(asset));
                    });

            } else {
                let cf1; let cf2; let cf3; let cf4; let cf5;
                let capex1; let capex2; let capex3; let capex4; let capex5;

                cf1 = form.cf1.value;
                cf2 = form.cf2.value;
                cf3 = form.cf3.value;
                cf4 = form.cf4.value;
                cf5 = form.cf5.value;

                capex1 = form.capex1.value;
                capex2 = form.capex2.value;
                capex3 = form.capex3.value;
                capex4 = form.capex4.value;
                capex5 = form.capex5.value;

                const cf = [cf5, cf4, cf3, cf2, cf1];
                const capex = [capex5, capex4, capex3, capex2, capex1];

                body = {
                    desiredReturn: roi,
                    currentEquity: equity,
                    marginOfSafety: mos,
                    shares: shares,
                    cashFlows: cf,
                    capitalExpenditures: capex
                }

                axios.post("http://localhost:8080/compound-calculator/stock", body, { headers })
                    .then(res => {
                        stocks.push(res.data);
                        setStockState(stocks);
                        stockState.map(asset => console.log(asset));
                    });

            }
        }
    }

    return (

        <main>
            <AssetContext.Provider value={[...assets]}>
                <Container>
                    <br></br>
                    <Navigation />
                </Container>
                <br></br>
                <HowTo />
                <br></br>
                <CardDeck>
                    <FixedCard getResult={getResult} />
                    <StockCard getStock={getStockPrice} />
                </CardDeck>
                <br></br>
                <Container>
                <Card body>
                    <Card.Title>
                        Result card
                        </Card.Title>
                    <br></br>
                    <hr></hr>
                    <section>
                        <Row>
                            <Col>
                                <p><Badge variant="secondary">Compounding assets</Badge></p>
                                <Table striped borderless hover size="sm" variant="secondary" responsive>
                                    <thead>
                                        <tr>
                                            <th>
                                                #
                                                </th>
                                            <th>
                                                Principle
                                                </th>
                                            <th>
                                                length
                                                </th>
                                            <th>
                                                End value
                                                </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        //What am I missing here?
                                        {fixed.map((asset, index) => (
                                            <tr>
                                                <td>
                                                    {index + 1};
                                                    </td>
                                                <td>
                                                    ${asset.principle}
                                                </td>
                                                <td>
                                                    {asset.iLength} yrs
                                                    </td>
                                                <td>
                                                    ${asset.endValue}
                                                </td>
                                            </tr>))
                                        }
                                    </tbody>
                                </Table>
                            </Col>
                           /*
                            * Below here is not yet implemented
                            */
                            <Col>
                                <p><Badge variant="secondary">Stocks</Badge></p>
                                <Table striped borderless hover size="sm" variant="secondary" responsive>
                                    <thead>
                                        <tr>
                                            <th>
                                                #
                                                </th>
                                            <th>
                                                Ticker
                                                </th>
                                            <th>
                                                Market
                                                </th>
                                            <th>
                                                Discounted
                                                </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {/* <tr>
                                    <td>
                                        Ticker
                                </td>
                                    <td>
                                        Fair price
                                </td>
                                    <td>
                                        Discount price
                                </td> */}
                                        {/* </tr> */}
                                    </tbody>
                                </Table>
                            </Col>
                        </Row>
                    </section>
                </Card>
                </Container>
                <br></br>
            </AssetContext.Provider>
        </main>
    );
}

export default growthCalculator;

import React，{useState，useffect}来自“React”；
导入'bootstrap/dist/css/bootstrap.min.css'；
导入“/growthcollator.css”；
从“react bootstrap”导入{容器、卡片组、卡片、行、列、徽章、表}；
从“axios”导入axios；
从“../components/fixedAssets/FixedCard”导入FixedCard；
从“../components/stocks/StockCard”导入StockCard；
从“../components/Navigation”导入导航；
从“../context/AssetContext.js”导入AssetContext；
从“../components/HowTo”导入HowTo；
常量增长计算器=（道具）=>{
const[fixedState，setFixedState]=useState（[]）；
常量[stockState，setStockState]=useState（[]）；
常量资产=[fixedState，setFixedState，stockState，setStockState]；
让股票=股票状态；
设固定=固定状态；
useffect（（）=>{
股票=股票状态；
固定=固定状态；
//useRef（）能解决我的问题吗？
}，[fixedState，stockState]）；
const getResult=（事件）=>{
const form=event.currentTarget；
event.preventDefault（）；
event.stopPropagation（）；
常量资产=固定状态；
让原则=形式、原则、价值；
常量长度=form.investmentLength.value/12；
让复合=form.component.value
let rate=form.rate.value；
让量；
如果（表格金额）{
金额=form.amount.value；
原则=原则*金额；
}
如果（isNaN（速率）| |速率<0）{
警报（“尽管使用\“+rate+”\”计算结果很有趣，但无法完成。请输入有效数字”）；
}否则{
如果（复合==“每月”）{
化合物=12；
}否则，如果（化合物==“每年”）{
化合物=1；
}否则，如果（复合==“季度”）{
化合物=4；
}否则{
化合物=365；
}
常量头={
“内容类型”：“应用程序/json”，
“访问控制允许来源”：“本地主机：3000/”，
“访问控制允许方法”：“POST”，
}
常数体={
原则:原则,，
利率：利率，
iLength:iLength，
复合频率：复合
}
axios.post（“http://localhost:8080/compound-计算器/节省”，正文，{headers}）
。然后（res=>{
资产推送（res.data）；
设定固定状态（资产）；
fixedState.map（资产=>console.log（资产））；
});
}
}
const getStockPrice=（事件）=>{
const form=event.currentTarget；
event.preventDefault（）；
event.stopPropagation（）；
const roi=form.roi.value；
常数mos=form.mos.value；
常量权益=form.equity.value*1000；
const shares=form.shares.value*1000000；
如果（投资回报率50）{
警告（“安全边际必须介于0（我不建议这样）和50之间”）；
}否则，如果（股份）{
股票推送（res.data）；
设置库存状态（库存）；
map（资产=>console.log（资产））；
});
}否则{
让cf1；让cf2；让cf3；让cf4；让cf5；
设capex1；设capex2；设capex3；设capex4；设capex5；
cf1=form.cf1.value；
cf2=form.cf2.value；
cf3=form.cf3.value；
cf4=form.cf4.value；
cf5=表cf5.1中的值；
capex1=form.capex1.value；
capex2=form.capex2.value；
capex3=form.capex3.value；
capex4=form.capex4.value；
capex5=form.capex5.value；
常数cf=[cf5，cf4，cf3，cf2，cf1]；
常量资本支出=[capex5、capex4、capex3、capex2、capex1]；
正文={
desiredReturn:roi，
当前权益：权益，
marginOfSafety:mos，
股份：股份，
现金流量：cf，
资本支出：资本支出
}
axios.post（“http://localhost:8080/compound-计算器/股票”，正文，{headers}）
。然后（res=>{
股票推送（res.data）；
设置库存状态（库存）；
map（资产=>console.log（资产））；
});
}
}
}
返回(












成绩卡




复合资产

#
{
  fixed.map((asset, index) => {
    console.log(`asset`, asset)
    return (
      <tr>
        <td>{index + 1}</td>
        <td>{asset.title}</td>
        <td>{asset.title}</td>
        <td>{asset.title}</td>
      </tr>
    );
  })
}