Question

对不起，我是编码新手，在做项目时遇到一些错误，组件结构为：轮廓>框>框

1）为什么“ TypeError：props.total未定义”，我想在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

您将道具传递错了，然后试图从道具中获取数据。

这里：

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

您正在传递两个道具：title和count。这些来自Users[1]的{{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>是对象，我们不能将对象直接呈现到DOM。使用props对象中的内容：

props

我不明白第二个问题。您要计算什么，并且要在哪里计算？问问题时，请尽量具体一些。

反应来自Json的通话数据

1 个答案: