不能接收和显示道具在反应组件

Question

我的MERN应用程序在前端有问题。当我在/params地址的后端发出get请求时，我可以在响应中获得json对象:

current: 2
date: "2021-10-01T07:00:32.524Z"
power: 7.2
soc: 100
temperature: 20.5
voltage: 3.6
__v: 0
_id: "6156b21021e67919047727c7"

对象是否实际接收和GET_PARAMS动作被调度，我可以确保使用console.log()在reducer文件:

import {
GET_PARAMS,
PARAMS_ERROR,
CLEAR__PARAMS
} from '../actions/types';
const initialState = {
params: null,
loading: true,
exist: true,
error: {}
};
export default function(state = initialState, action) {
const { type, payload } = action; 

switch (type) {
case GET_PARAMS: 
return {
...state,
params: payload,
loading: false,
exist: true
};
case PARAMS_ERROR:
return {
...state,
error: payload,
loading: false,
params: null,
exist: false
};
case CLEAR__PARAMS:
return {
...state,
params: null,
loading: false,
exist: true
};
default:
return state;
}
}

但是当我运行应用程序时，我只能看到React组件中的空占位符，因为props的undefined值:

import React, { Fragment, useEffect } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import Spinner from '../layout/Spinner';
import NotFound from '../layout/NotFound';
import { getParams } from '../../actions/params';
import { withRouter } from 'react-router-dom';
const Params = ({getParams, params: { voltage, current, power, soc, temperature, date }, loading, exist, 
auth }) => {
console.log(voltage);  //undefined
useEffect(() => {
getParams();
}, [getParams]);
return (
<Fragment>
<h1>ESP8266 Aspil Web Server</h1>
<table className="table">
<tbody>
<tr>
<td className="hide-sm"><h3>Time: </h3> </td>
<td className="hide-sm"><h3 id="time">{date}</h3></td>
</tr>
<tr>
<td className="hide-sm"><h3>Voltage: </h3></td>
<td className="hide-sm"><h3 id="voltage">{voltage} V</h3></td>
</tr>
<tr>
<td className="hide-sm"><h3>Current: </h3></td>
<td className="hide-sm"><h3 id="current">{current} A</h3></td>
</tr>
<tr>
<td className="hide-sm"><h3>Power: </h3></td>
<td className="hide-sm"><h3 id="power">{power} W</h3></td>
</tr>
<tr>
<td className="hide-sm"><h3>SOC: </h3></td>
<td className="hide-sm"><h3 id="soc">{soc}%</h3></td>
</tr>
<tr>
<td className="hide-sm"><h3>Temperature: </h3></td>
<td className="hide-sm"><h3 id="temperature">{temperature} oC</h3></td>
</tr>
</tbody>
</table>
</Fragment>
)
};
Params.propTypes = {
params: PropTypes.object.isRequired,
auth: PropTypes.object.isRequired,
getParams: PropTypes.func.isRequired
};
const mapStateToProps = state => ({
params: state.params,
auth: state.auth,
loading: state.loading,
exist: state.exist
});
export default connect(mapStateToProps, { getParams })(Params);

为什么会出错?

Answer 1

要在表中显示数据，您应该在从后端获取数据时使用.map()。所以对于。map()它将获取你所有的数据并单独显示你想要的字段。

所以我只是假设你有我在下面写的代码。

从后端返回的数据:

current: 2
date: "2021-10-01T07:00:32.524Z"
power: 7.2
soc: 100
temperature: 20.5
voltage: 3.6
__v: 0
_id: "6156b21021e67919047727c7"

action

export const getAllData = () => async dispatch => {
const response = await axios.get("/params");
dispatch({ type: GET_PARAMS, payload: response.data });
};

reducer

import {
GET_PARAMS,
PARAMS_ERROR,
CLEAR__PARAMS
} from '../actions/types';
const initialState = {
params: null,
loading: true,
exist: true,
error: {}
};
export default function(state = initialState, action) {
const { type, payload } = action; 

switch (type) {
case GET_PARAMS: 
return {
...state,
params: payload,
};
case PARAMS_ERROR:
return {
...state,
error: payload,
loading: false,
params: null,
exist: false
};
case CLEAR__PARAMS:
return {
...state,
params: null,
loading: false,
exist: true
};
default:
return state;
}
}

因为我不知道你如何从后端到前端获取数据。我不知道this.props的值是多少，所以我假设它或多或少是下面的代码。

component

import React, { Component } from "react";
import Container from '@material-ui/core/Container';
import { connect } from "react-redux";
import Table from '@material-ui/core/Table';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import TableBody from '@material-ui/core/TableBody';
import TableContainer from '@material-ui/core/TableContainer';
import { getAllData} from "./actions";

class Params extends Component {
constructor() {
super();
this.state = {
skip: 0,
limit: 10,
pageNumber: 0,
value: ''
};
}
componentDidMount() {
this.props.getAllData();
}
render() {
return (
<div>
<div/>
<Container>
<TableContainer>
<Table aria-label="enhanced table">
<TableHead>
<TableRow>
<TableCell>Time</TableCell>
<TableCell>Voltage</TableCell>
<TableCell>Current</TableCell>
<TableCell>Power</TableCell>
<TableCell>SOC</TableCell>
<TableCell>Temperature</TableCell>
</TableRow>
</TableHead>
<TableBody>
{this.props.params.map((busObj, index) => {
return (
<TableRow>
<TableCell> {busObj.date} </TableCell>
<TableCell >{busObj.voltage}</TableCell>
<TableCell>{busObj.current}</TableCell>
<TableCell >{busObj.power}</TableCell>
<TableCell>{busObj.soc}</TableCell>
<TableCell>{busObj.temperature}</TableCell>
</TableRow>
)
})}
</TableBody>
</Table>
</TableContainer>
</Container>
</div>
);
}
}
Params.propTypes = {
params: PropTypes.object.isRequired,
auth: PropTypes.object.isRequired,
getParams: PropTypes.func.isRequired
};
const mapStateToProps = state => ({
params: state.params,
auth: state.auth,
loading: state.loading,
exist: state.exist
});
export default connect(mapStateToProps, { getParams })(Params);

这或多或少可以是您想要的。我希望这就是你要找的。