嗨，我有如下所示的redux商店：
{......"Device_Settings": [{
"id": "1",
"data": [{
"ti": "IP Address",
"v": "192.168.12.100",
"d": "d",
"m": "m",
"t": "1",
"i": "egauge-ip.info"
}, {
"ti": "Username",
"v": "streambox",
"d": "d",
"m": "m",
"t": "2",
"i": "egauge-user.info"
}, {
"ti": "Password",
"v": "streambox",
"d": "d",
"m": "m",
"t": "2",
"i": "egauge-pass.info"
}, {
"ti": "SPL number",
"v": "",
"d": "d",
"m": "m",
"t": "2",
"i": "egauge-id.info"
}]
}, {
"id": 2,
"data": [{
"ti": "IP Address",
"v": "192.168.12.100",
"d": "d",
"m": "m",
"t": "1",
"i": "egauge-ip.info"
}, {
"ti": "Username",
"v": "streambox",
"d": "d",
"m": "m",
"t": "2",
"i": "egauge-user.info"
}, {
"ti": "Password",
"v": "streambox",
"d": "d",
"m": "m",
"t": "2",
"i": "egauge-pass.info"
}, {
"ti": "SPL number",
"v": "",
"d": "d",
"m": "m",
"t": "2",
"i": "egauge-id.info"
}]
}, {
"id": 3,
"data": [{
"ti": "IP Address",
"v": "192.168.12.100",
"d": "d",
"m": "m",
"t": "1",
"i": "egauge-ip.info"
}, {
"ti": "Username",
"v": "streambox",
"d": "d",
"m": "m",
"t": "2",
"i": "egauge-user.info"
}, {
"ti": "Password",
"v": "streambox",
"d": "d",
"m": "m",
"t": "2",
"i": "egauge-pass.info"
}, {
"ti": "SPL number",
"v": "",
"d": "d",
"m": "m",
"t": "2",
"i": "egauge-id.info"
}]
}]}
我想在用户输入输入字段时更新每个特定的单个元素。一些商店如何为所有设备更新相同的元素，尽管我使用了对象分配，通过其id操纵元素，更新克隆对象和分派。如果我做错了，你会发现吗？实际上商店很大，它没有重复元素的更新。当来到重复元素时，我无法通过其id更新特定元素...我的代码更新所有重复元素，而不管设备ID。
以下是我的代码：
组件：
import Layoutstyles from "./Layoutstyles.css"
import $ from "jquery"
import React from "react"
import { connect } from "react-redux"
import {Grid, Row, Col, Navbar, Nav, NavItem, NavDropdown, MenuItem, Jumbotron, Button} from "react-bootstrap"
import { Fetch_SB_Current_Info, UpdateSBInfo, Fetch_Datacollector, save_device_info_value_to_globaldata } from "../actions/StreamboxActions"
@connect((store) => {
return {
streamboxdata:store.streamboxdatastore.streamboxdata,
};
})
export default class DeviceInputvalue extends React.Component {
constructor(props){
super();
this.handleChangeDeviceInput = this.handleChangeDeviceInput.bind(this);
this.alertValue = this.alertValue.bind(this);
this.savevaluetomodel = this.savevaluetomodel.bind(this);
this.state = {value:null};
}
componentWillMount() {
const where = this.props.where;
this.setState({value: where.v});
}
handleChangeDeviceInput(evt) {
console.log("I'm Clicked from deviceid " +this.props.deviceid);
this.setState({value: evt.target.value});
console.log("value from device id "+this.props.deviceid + " from dc type "+ this.props.dcname +" from row "+this.props.where.ti);
var newvalue = Object.assign({},this.props.where);
newvalue.v = evt.target.value;
console.log(newvalue);
this.savevaluetomodel(newvalue,this.props.streamboxdata,this.props.where.ti,this.props.dcname,this.props.deviceid);
}
alertValue() {
}
savevaluetomodel(value,model,where,dcname,deviceid){
this.props.dispatch(save_device_info_value_to_globaldata(value,model,where,dcname,deviceid));
}
_displayHelp(){
console.log(JSON.stringify(this.props.streamboxdata));
}
render() {
const where = this.props.where;
const deviceid = this.props.deviceid;
console.log(deviceid);
return(
<Grid fluid={false}>
<Row>
<Col xs={4} md={4} lg={4}>
<label>{where.ti}</label>
</Col>
<Col xs={4} md={4} lg={4}>
<input className={Layoutstyles.fullwidth} value={this.state.value} type="text" onChange={this.handleChangeDeviceInput}></input>
</Col>
<Col xs={4} md={4} lg={4}>
<button className={Layoutstyles.buttonHelp} onClick={this._displayHelp.bind(this)}>Help</button>
</Col>
</Row>
</Grid>
);
}
}
这是我的行动：
export function save_device_info_value_to_globaldata(valueobject,globaldata,where,dcname,deviceid){
// console.log(value);
// console.log(globaldata);
// console.log(where);
// console.log(dcname);
// console.log(deviceid);
return function (dispatch){
var newcopy = Object.assign({},globaldata);
for (var i = 0; i < newcopy.Monitored_Devices.length; i++) {
var devicetype = newcopy.Monitored_Devices[i];
console.log(devicetype);
if (devicetype.Title==dcname){
console.log(devicetype);
for (var k = 0; k < devicetype.Device_Settings.length; k++) {
var eachdevice = devicetype.Device_Settings[k];
if (eachdevice.id==deviceid){
console.log(eachdevice.id);
for (var m = 0; m < eachdevice.data.length; m++) {
if (eachdevice.data[m].ti == valueobject.ti){
eachdevice.data[m].v = valueobject.v;
break;
}
}
}
}
}
}
dispatch({type:"FETCH_SBINFO_FULFILLED", payload: newcopy})
}
}
这是我的减速机
export default function reducer(state={
streamboxdata:[],
// datacollector:[],
fetching: false,
fetched: false,
posting: false,
posted: false,
error: null,
}, action) {
if (typeof(action.payload)!=='undefined'){
// console.log(action.payload.SBInfo);
}
switch (action.type) {
case "FETCH_SBINFO_REJECTED": {
return {...state, fetching: false, error: action.payload}
}
case "FETCH_SBINFO_FULFILLED": {
// console.log(state);
// console.log(streamboxdata);
return {
...state,
fetching: false,
fetched: true,
streamboxdata: action.payload,
}
}
case"FETCH_SBINFO_FULFILLED_DETECT":{
console.log(action.payload);
}
case "POST_SBINFO_REJECTED":{
return {...state, posting: false, error: action.payload}
}
case "POST_SBINFO_FULFILLED":{
return {
...state,
posting:false,
posted:true
}
}
// case "Fetch_Datacollector_Fulfilled":{
// return {
// ...state,
// fetching:false,
// fetched:true,
// datacollector: action.payload,
// }
// }
}
// console.log(state);
return state
}