通过复选框项目的本地状态更新redux状态

Question

stackoverflow中也有类似的问题，但我没有找到我要找的东西。我有一个donorDonationForm，它是一个连接到redux状态的类组件。该组件的用途是收集想要捐赠电子产品的人的信息。在这一点上，我想将这些项保存在一个数组中(将来可能与对象一起保存(。我的redux状态保存捐赠者信息，reducer看起来像这样：

import {CHANGE_INPUT_FIELD} from '../utils/constants';
const initialStateInputs = {
// update the state
donorFields: {
name: '',
phone: '',
area: '',
yeshuv: '',
address: ''
// dateOfOffer: ''
},
donationFields: {
// donorID: '',
// vulonteerID: '',
type: [],
quantity: 1,
status: 'NOT_HANDLED',
comments: ''
// lastDateHandled: ''
}
// }, items: [ //need to add quantity
//         {id: 1, name: "LAPTOP", isChecked: false, label: 'מחשב'},
//         {id: 2, name: "HEADPHONES", isChecked: false, label: 'אוזניות'},
//         {id: 3, name: "OTHER", isChecked: false, label: 'אחר'},
//     ]   
}

export const donorDonationInputsReducer = ( state = initialStateInputs, action={} ) => {
switch(action.type) { 
case CHANGE_INPUT_FIELD: 
return Object.assign( {}, state, 
{
donorFields :  {...state.donorFields,...action.payload},
donationFields:  {...state.donationFields,...action.payload},
// items :  {...state.items,...action.payload},
// isChecked:  action.payload
}) 
default:
return state;
}
}

正如你所看到的，这些项目现在已经被评论了，我正在本地状态下管理项目的状态，这就是comp的样子：

import React, {Component} from 'react';
import { connect } from 'react-redux';
import { setInputField } from '../actions/formAction';
import CheckBox from '../components/CheckBox/CheckBox';
import FormInput from '../components/FormInput/FormInput';
import {selectAreasOptions_2} from '../utils/constants';
import "./form.css";
const mapStateToProps = (state) => {
return {
donorFields: state.donorDonationInputsReducer.donorFields,
donationFields: state.donorDonationInputsReducer.donationFields
}
}
const mapDispatchToProps = dispatch => {
return {
onInputChange: event =>  {
const {name, value} = event.target;
dispatch(setInputField( { [name]:value} ) )
}
} 
}

class donorDonationForm extends Component {
constructor() {
super();
this.state = {
items: [ 
{id: 1, name: "LAPTOP", isChecked: false, label: 'מחשב'},
{id: 2, name: "HEADPHONES", isChecked: false, label: 'אוזניות'},
{id: 3, name: "OTHER", isChecked: false, label: 'אחר'},
]
,
type: []
}
}
handleCheckChieldElement = (event) => {
let {items, type} = this.state;
let arr = [];
items.forEach(item => {
if (item.name === event.target.value) {
item.isChecked = event.target.checked;
//    console.log(`item.name  :${item.name }`);
//    console.log(`event.target.value :${event.target.value}`);
//    console.log(`event.target.checked :${event.target.checked}`);
}      
})
items.map(item => item.isChecked ? arr.push(item.name) : null)
this.setState({items: [...items], type: [...arr]});

}
onButtonSubmit = (event) => {
console.log(this.props.donorFields);
event.preventDefault();
fetch('http://localhost:8000/api/donor', {
method: 'post', 
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({ 
...this.props.donorFields
})
})
.then(response => response.json())
.then(resp => console.log(resp))
.catch( err => console.log(err) )       
}
// componentDidUpdate(prevProps, prevState) {
//  const {items, type} = this.state;
//  // const type = [];
//  if (prevState.items !== items) {
//      console.log('items state has changed');
//      items.map (item => item.isChecked ? 
//          this.setState({type: [...type,item.name]}) : null)
//          // if (item.isChecked) { type.push(item.name) } ;

//      console.log(type);
//  }
//   }
render() {
console.log(this.state.items);
console.log(this.state.type);
const { onInputChange } = this.props;
return (
<div>
<h1 className="pt4"> פרטי תורם</h1>
<form className=" black-80 pt2" >
<section className=" grid-container">
<FormInput 
id="name"
name="name"
type="text"
onInputChange={onInputChange}
label="שם "
required
/>
<FormInput 
id="phone"
name="phone"
type="tel"
onInputChange={onInputChange}
label="מספר טלפון "
required
/>
<FormInput 
id="address"
name="address"
type="text"
onInputChange={onInputChange}
label="כתובת "
required
/>
<FormInput 
id="yeshuv"
name="yeshuv"
type="text"
onInputChange={onInputChange}
label="עיר "
required
/>  
<FormInput 
id="comments"
name="comments"
onInputChange={onInputChange}
label="הערות "
required
/>
<FormInput 
id="area"
name="area"
onInputChange={onInputChange}
label="איזור "
select={selectAreasOptions_2}
/>
{/* type */}
<div className="measure-narrow">
<label htmlFor="type" className="f5 b db mb2">מעוניין לתרום
<span className="normal black-60"> *</span>
</label>
{
this.state.items.map( (item, i) => {
return (
<CheckBox 
key={i}
onChange={this.handleCheckChieldElement}
checked={ item.isChecked } 
value= {item.name}
label = {item.label}
/>
);
})
}
</div>
</section>
<input type="submit" value="שלח" 
className="b bg-light-blue pa2 hover pointer" 
onClick={this.onButtonSubmit}
/>
</form> 
</div>
);
}
}
export default connect(mapStateToProps, mapDispatchToProps)(donorDonationForm);

我的主要目标是，类型数组(最终捐赠(将在提交此表单之前更新redux状态。我尝试了componentDidUpdate，但没有成功。跟踪选中的项目，更新数组，然后更新类型数组(在redux状态下的最终捐赠(的最佳方式是什么？我应该在onButtonSubmit方法中这样做吗？在将数据发送到服务器之前(这样可以节省在items数组上搜索选中元素的循环(？

Answer 1

更好的方法是在onButtonSubmit内部进行让我简要解释一下任务：

1. inputChangeHandler更新this.state.items
2. 转到onButtonSubmit中的最终this.state.items值Array of items
3. 获取API响应后，使用Array of items更新应用程序级别Redux state

注意：调度操作。Reducer将更新Redux状态。以下代码将执行此操作：

// Action
export const setItems = (data) => (dispatch) => {
dispatch({type: 'SET_ITEMS', payload: data})
}
// mapDispatchToProps
const mapDispatchToProps = (dispatch) =>
bindActionCreators(
{
setItems,
...others
},
dispatch
)
// onSubmitButton
onButtonSubmit = (event) => {
console.log(this.props.donorFields);
event.preventDefault();
fetch('http://localhost:8000/api/donor', {
method: 'post', 
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({ 
...this.props.donorFields
})
})
.then(response => this.props.setItems(response.json())) // will update the state.
.then(resp => console.log(resp))
.catch( err => console.log(err) )       
}
// Reducer
export const donorDonationInputsReducer = ( state = initialStateInputs, action={} ) => {
switch(action.type) { 
case CHANGE_INPUT_FIELD: 
return Object.assign( {}, state, 
{
donorFields :  {...state.donorFields,...action.payload},
donationFields:  {...state.donationFields,...action.payload},
// items :  {...state.items,...action.payload},
// isChecked:  action.payload
})
case SET_ITEMS:
return {
...state,
items: action.payload
}
default:
return state;
}
}

就是这样。

快乐编码：(