如何通过React动态显示数据列表

Question

我是React的新手，正在尝试用checkbox和inputbox显示数据列表。详细地说，我想从database中获取一系列数据，并将每条记录放入一个<div>中，就像element和checkbox和inputbox一样。因此，我可以检查记录并更改数据，然后在单击按钮后进行重新保存操作。由于数据的数量会不断变化，如何使其动态？此外，我如何标记哪些记录正在检查并需要保存？谢谢

代码：

App.js:
import React from 'react';
import { useState, useEffect } from 'react';
import { Menu, Message, Button, Segment } from 'semantic-ui-react';
import SemanticDatepicker from 'react-semantic-ui-datepickers';
import 'react-semantic-ui-datepickers/dist/react-semantic-ui-datepickers.css';
import Form from './Form';
export default function App(props){
const [currentDate, setNewDate] = useState(null);
const onChange = (event, data) => setNewDate(data.value);
const loadData= (event) => {
return (<Form date = {currentDate} />);
};
return (
<div className="App">
<div>
<Menu borderless>
<Menu.Item >
<div >
<img src={logo} alt="image" />
</div>
</Menu.Item>
</Menu> 

<Segment>
<SemanticDatepicker onChange={onChange} />
<Button onClick={loadData}>Load Data</Button>
</Segment>
<Segment>>
</Segment>
//Here will diaplyed returned list of data after click button
</div>
</div> 
)
};

简单的JSON响应：

{
"APPLE":{
"PRICE":100
},
"ORANGE":{
"PRICE":20
},
"PEAR":{
"PRICE":10
}
}

Answer 1

您可以使用数据构建表单。

1. 您需要根据数据构建状态
2. 此外，根据您所在的州映射您的input字段
3. 如果状态需要不同的输入字段，您可以在deriveStateFromData中定义您的输入字段

您可以在此处查看示例

对于Object.keys，您可以在这里查看文档

import React from 'react';
const price = {
"APPLE":{
"PRICE":100
},
"ORANGE":{
"PRICE":20
},
"PEAR":{
"PRICE":10
}
}
function deriveStateFromData(data) {
let state = {}
Object.keys(data).forEach(key => {
state[key] = data[key]['PRICE']
})
return state;
}
function MyForm({ data }) {
const [form, setFormData] = React.useState(deriveStateFromData(data));
const handleChange = e => {
setFormData({ ...form, [e.target.name]: Number(e.target.value) });
}
console.log(form)
return (
<>
{Object.keys(form).map(key => {
return (
<div>
<label>{key}</label>
<input 
name={key}
value={form[key]}
onChange={handleChange}
/>
</div>
)
})}
</>
)
}
const App = () => <MyForm data={price} />
export default App;