代码之家 › 专栏 › 技术社区 › JamesG

Laravel+React:处理API数据

laravel reactjs php javascript

0

JamesG · 技术社区 · 5 年前

我对react和laravel是个新手,在这可怕的封锁期间,我试图提高我的技能。我正在关注大量的教程,但我一直发现它们要么不完整,要么英语很差,要么不够深入,而且跳过的东西太快。

我并不是说我忘恩负义,我喜欢人们分享这些信息,我只是在努力掌握这些信息。

我希望有人能帮助我理解如何让所有这些组件一起工作。我将解释我的项目:

我的项目

拉维尔
反应
JS图表
独自创立

我正在创建一个非常基本的加密货币仪表盘。这将显示一个图表和一个数据表。

这是一个线框:

我创建了以下组件:

侧边栏
图表
桌子

这些在 welcome.blade.php 文件:

return (
        <div className="example">
            <SideBar />
            <Chart />
            <Table />
        </div>
    );

我还创建了一个链接到sqlite数据库的Laraval API。侧边栏显示了我在数据库中拥有的加密货币列表。

在侧边栏中:

我打电话给 /crypto 我得到了一个返回的JSON。这包含了我数据库中所有密码的列表(目前只有前10名)。

componentDidMount() {
        
        fetch('/api/crypto')
            .then(response => {
                return response.json();
            })
            .then(crypto => {
                this.setState({ crypto });
            });
      }

然后我将其添加到 state :

constructor() {
        super();

        this.state = {
            crypto: [],
        };
    }

然后我把它呈现到一个列表项中。

我也在做同样的事情 chart 还有 table 然而,他们只能从端点获得特定的加密 /api/crypto?coin=btc .

所有这些都很好,数据如表所示,图表显示正确。

我想做什么。

我希望能够单击侧栏中的任何加密名称,并使用特定数据更新图表和表格数据。
我希望能够减少API调用的数量,这样,如果我不需要请求数据库10次

我将非常感谢详细的答案,链接和参考视频-教程等。。。

非常感谢。

0 回复 | 直到 5 年前

1

MarkP 5 年前

首先,我怀疑你的 welcome.blade.php 不是你的工作地点

return (
        <div className="example">
            <SideBar />
            <Chart />
            <Table />
        </div>
    );

这通常是在一个。js文件。

你需要做的是所谓的“提升国家”。

这意味着您从各个组件获取状态,并将它们向上移动到包装器组件。

在你的 App.js 文件它仍然可以被称为 Example.js 如果你没有改变它。在这里,您将看到:

返回(
<div className=“示例”>
<侧边栏/>
<图表/>
<表/>
</部门>
);

去掉所有状态和函数的引用 sidebar , chart , table 组成部分

把那些东西加到 应用程序。js 文件

现在,当你想把信息传递给那些组件时,你可以把它们作为 props .

例如:

return (
        <div className="example">
            <SideBar tickers={tickers}/>
            <Chart data={data} />
            <Table data={data}/>
        </div>
    );

然后这些就变成了所谓的 Controlled Componenents 他们是无国籍的。他们只依赖传递给他们的信息。所以当状态发生变化时 应用程序。js 它将更新较低的组件。

查看: https://www.youtube.com/user/programmingwithmosh 他真的很好,正如你之前提到的,他英语很棒,而且很有深度。

祝你好运,在利用封锁进行教育和自我提升方面做得很好。