【发布时间】：2021-08-13 20:43:05
【问题描述】：
我是全新的反应。我正式完成了用头撞墙。我就是想不通。这是我的情况：
我正在尝试将 API 调用的结果放入表中。我有调用 API 的工作，结果回来了。我被困在如何用返回的数据更新我的数组。完成之后，我可以用数据填充表格（至少在逻辑上这是我的大脑告诉我的方式）。
初始表单状态设置：
const initialFormState = {
fileTypeId : '',
companyMasterId: '',
investmentCompanyId: '',
startDate: '',
endDate: '',
result: '',
fileLogs: []
}
以上所有字段都是表单\数据库中的字段。 API 调用采用这些参数来调用存储过程，该存储过程根据搜索参数返回结果集。 fileLogs[] 是我想要放置返回数据的地方。我不确定是否需要将其移出此设置并仅将 useState 用作单独的东西？
reducer 初始化：
const [formState, dispatch] = useReducer (formReducer, initialFormState)
减速器设置
formReducer.js
import actionTypes from "./actionTypes"
const formReducer = (state, action) => {
switch (action.type) {
case actionTypes.handle_input_text:
return {
//using the spread operator (…state) to copy across all the properties and values from the state object.
//then we can modify the values of specific state properties by explicitly declaring them again with a new value.
...state,
[action.field]: action.payload,
}
case actionTypes.toggle_consent:
return{
...state,
hasConsented: !state.hasConsented
}
case actionTypes.on_success:
return{...state, filelogs: action.payload}
default:
return state
}
}
export default formReducer
API 调用
function getFileRouteLogs (e) {
e.preventDefault()
apiService.getFileRouteLogs(
formState.fileTypeId,
formState.companyMasterId,
formState.investmentCompanyId,
formState.startDate,
formState.endDate,
formState.result
)
.then((response)=>{
// dispatch({
// type: actionTypes.on_success,
// // payload: [...formState.fileLogs, response.data]
// payload: response.data
// })
formState.fileLogs = response.data
console.log(response.data)
})
表单输入更改处理程序
const handleInputChange = (e) => {
dispatch({
type: actionTypes.handle_input_text,
field: e.target.name,
payload: e.target.value
})
}
输入表单
return (
<div>
<h1>File Route Log Search</h1>
<hr />
<h2>Form field area</h2>
<Form onSubmit={getFileRouteLogs}>
<FormGroup row>
<Label for="fileTypeId" sm={2}>FileTypeId</Label>
<Col sm={2}>
<Input type="text" name="fileTypeId" value={formState.fileTypeId} onChange={(e) => handleInputChange(e)}></Input>
</Col>
</FormGroup>
<FormGroup row>
<Label for="companyMasterId" sm={2}>CompanyMasterId</Label>
<Col sm={2}>
<Input id="companyMasterId" type="text" name="companyMasterId" value={formState.companyMasterId} onChange={(e) => handleInputChange(e)} ></Input>
</Col>
</FormGroup>
...
已尝试设置表以保存数据
const FileRouteLogTable = ({formState}) => {
return (
<table className="table">
<thead>
<tr>
<th>FileRouteLogId</th>
<th>CompanyMasterId</th>
<th>FileTypeId</th>
<th>Result</th>
<th>InvestmentCompanyMasterId</th>
<th>FileName</th>
</tr>
</thead>
<tbody>
{ (formState.length > 0) ? formState.map( (form, index) => {
return (
<tr key={ index }>
<td>{ form.fileRouteLogId }</td>
<td>{ form.companyMasterId }</td>
<td>{ form.fileTypeId}</td>
<td>{ form.result }</td>
<td>{ form.investmentCompanyMasterId }</td>
<td>{ form.fileName }</td>
</tr>
)
}) : <tr><td colSpan="5">Enter search parameters...</td></tr> }
</tbody>
</table>
);
}
export default FileRouteLogTable
我打算尝试使用 react-table，但在我可以做任何表格内容之前，我一直在更新数据
import { useTable } from 'react-table'
function FileRouteLogTable({ columns, formState }) {
// Use the state and functions returned from useTable to build your UI
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
} = useTable({
columns,
formState,
})
return (
<table {...getTableProps()}>
<thead>
{headerGroups.map(headerGroup => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map(column => (
<th {...column.getHeaderProps()}>{column.render('Header')}</th>
))}
</tr>
))}
</thead>
<tbody {...getTableBodyProps()}>
{rows.map((row, i) => {
prepareRow(row)
return (
<tr {...row.getRowProps()}>
{row.cells.map(cell => {
return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
})}
</tr>
)
})}
</tbody>
</table>
)
}
export default FileRouteLogTable
任何帮助将不胜感激。我看到的所有例子都没有我的综合因素：
- 功能组件
- 使用 useReducer
- 使用 axios
- 不在一个页面上的所有内容
- 不使用 useEffect 在页面加载时执行 API GET 调用
- 不只是在控制台日志中显示结果
更新 我修复了@johannchopin 提到的套管问题并更改了有效负载。我的表中仍然没有任何数据，所以我将表逻辑从：
{ (formState.length > 0) ? formState.map( (form, index) => {
到
{ (formState.fileLogs.length > 0) ? formState.fileLogs.map( (form, index) => {
数据在表格中
【问题讨论】：
标签： reactjs react-hooks use-reducer