响应来自 Json 的呼叫数据

Question

抱歉，我是编码新手，我在做项目时遇到了一些错误， 组件结构为：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'
  }
]

Answer 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

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