反应来自 Json 的呼叫数据

Question

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

1）为什么"TypeError: props.total is undefined"，我想在box组件中显示来自Json

的数据

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

你错误地传递了你的道具然后试图从他们那里取回数据。

这里：

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

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

但是这里：

<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

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

反应来自 Json 的呼叫数据

React call data from Json

javascript

json

components

reactjs

react-component