响应来自 Json 的呼叫数据

Posted 2023-02-23

【中文标题】响应来自 Json 的呼叫数据

【英文标题】：React call data from Json

【发布时间】：2019-01-22 10:27:31

【问题描述】：

抱歉，我是编码新手，我在做项目时遇到了一些错误， 组件结构为：profile > box > box

1) 为什么“TypeError: props.total is undefined”，我想显示来自 Json 的 box 组件中的数据

2) jsx中如何计算成功率？我试图在 Json 中设置一个公式........是的......我知道这很愚蠢

希望有人能帮我解决这个问题

非常感谢！

import React from 'react';
import Box from '../Box';

const Boxes = (props) => 
    return (
        <div className="d-flex justify-content-center profile-record">
            <Box className="record-div" id="record-prediction" title=props.total.title count=props.total.count />
            <Box className="record-div" id="record-win" title=props.win.title count=props.win.count />
            <Box className="record-div" id="record-rate" title=props.successRate.title count=props.successRate.count />
        </div>
    )


export default Boxes;

import React from 'react';

const Box = (props) => 
    return (
        <div className="record-div" id="record-prediction">
            <h2>props</h2>
            <p>props</p>
        </div>
    );


export default Box;

import React from 'react';
import Footer from '../components/Footer';
import Info from '../components/modules/Info';
import './Profile.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import  Users  from '../Users';
import Boxes from '../components/modules/Boxes';

class Profile extends React.Component 
    render() 
        return (
            <div className="content">
                <header className="d-flex justify-content-center">
                    <h1>Profile</h1>
                </header>
                <Info key=Users.id name = Users[1].name pic = Users[1].pic status =  Users[1].status/>
                <Boxes key=Users.id title = Users[1].total.title count=Users[1].total.count />
                <Footer className="footer"/>
            </div>
        )
    


export default Profile;

export const Users = [
    "userId": 1,
    "id": 1,
    "name": "Perry",
    "status": "ddddddd",
    "total":
      "title":"Total",
      "count": 10
    , 
    "win":
      "title":"Win",
      "count": 8
    ,
    "successRate":
      "title":"Rate",
      "count": "80%"
    ,
    "pic": 'https://scontent-hkg3-1.xx.fbcdn.net/v/t1.0-9/526566_10150652683517909_70002103_n.jpg?_nc_cat=0&oh=7ceaa1ea2ca75ae718a4234ec366d9f9&oe=5C0DEA6B'
  ,
  
    "userId": 2,
    "id": 2,
    "name": "HKJC",
    "status": "delectus aut autemdelectus delectus aut autemdelectusdelectus aut autemdelectusdelectus aut autemdelectusdelectus aut autemdelectusdelectus aut autemdelectusdelectus aut autemdelectus aut autemdelectus aut autemdelectus aut autemdelectus aut autemdelectus aut autemdelectus aut autemdelectus aut autem",
    "total":
      "title":"Total",
      "count": 10
    , 
    "win":
      "title":"Win",
      "count": 8
    ,
    "successRate":
      "title":"Rate",
      "count": "80%"
    ,
    "pic": 'https://scontent-hkg3-1.xx.fbcdn.net/v/t1.0-9/526566_10150652683517909_70002103_n.jpg?_nc_cat=0&oh=7ceaa1ea2ca75ae718a4234ec366d9f9&oe=5C0DEA6B'
  
]

【问题讨论】：

见How to Ask。一般来说，每个帖子只有一个问题，请。此外，这看起来很像您希望我们调试您的代码，而 SO 是一个可怕的调试器。你做了什么来解决这个问题？什么研究？ Edit这个问题，并明确你想做什么，你尝试了什么，你得到了什么结果。另外，很好的参考：ericlippert.com/2014/03/05/how-to-debug-small-programs

对不起，我会提高我的提问技巧，谢谢分享参考

【参考方案1】：

你错误地传递了你的 props，然后试图从它们那里取回数据。

这里：

<Boxes key=Users.id title = Users[1].total.title count=Users[1].total.count />

您正在传递两个道具：title 和 count。这些来自Users[1] 的total 道具。

但是在这里：

<Box className="record-div" id="record-prediction" title=props.total.title count=props.total.count />

您正在尝试将这些道具用作props.total.title 和props.total.count。没有props.total。你只有title 和count。

你应该这样使用它：

<Box className="record-div" id="record-prediction" title=props.title count=props.count />

但是，不用单独传递，你可以直接传递total：

<Box className="record-div" id="record-prediction" total=props.total />

那么你可以使用这个：

<Box className="record-div" id="record-prediction" title=props.total.title count=props.total.count />

这和win等是一样的。但是，像这样一个一个地传递道具就不是那么明智了。您可以映射用户，然后将相关组件传递为user。所以，你不用太纠结于道具。

最后一件事，你不能像这样渲染道具：

<div className="record-div" id="record-prediction">
    <h2>props</h2>
    <p>props</p>
</div>

props 是对象，我们不能将对象直接渲染到 DOM。使用 props 对象中的内容：

<div className="record-div" id="record-prediction">
    <h2>props.title</h2>
    <p>props.count</p>
</div

我不明白第二个问题。你想计算什么，你想在哪里做？提问时尽量具体。

【讨论】：

非常感谢，你喜欢老师，我还在尝试你的建议，现在没有错误但没有渲染数据，我会用你的建议概念再次思考谢谢