点击保存按钮添加额外的一个空字段

Question

我有一个规则组件，其中可以添加任意数量的规则，并且添加的规则将随规则的额外添加功能一起显示。在添加，删除规则字段时没有问题，但是当将数据发布到服务器时，数据会发布，但客户端会生成一个额外的空字段。我不知道如何以及为何发生。

下面是详细的代码

const _id = 0; 

function guid() { 
    function s4() { 
    return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1); 
    } 
    return s4() + s4(); 
} 

const removeByKey = (obj, deleteKey) => 
    Object.keys(obj).filter(key => key !== deleteKey).reduce((result, current) => { 
    result[current] = obj[current]; 
    return result; 
    }, {}); 

class Rules extends React.PureComponent { 
    constructor(props, context) { 
    super(props, context); 

    this.state = { 
     rules: { ruleAndregulations: {} }, 
    }; 
    } 

    componentDidMount() { 
    this.props.loadRules(); 
    } 

    componentWillReceiveProps(nextProps) { 
    if (nextProps.rules.size && nextProps.rules !== this.props.rules) { 
     nextProps.rules 
     .entrySeq() 
     .map(([key, value]) => { 
      console.log('key', key, value); 
      this.setState(
      state => ({ 
       rules: { 
       ...state.rules, 
       ruleAndregulations: { 
        ...state.rules.ruleAndregulations, 
        [value.get('_id')]: { _id: value.get('_id'), value: value.get('value') } 
       } 
       } 
      }) 
     ); 
     }) 
     .toArray(); 
    } 
    } 

    handleAddRules = e => { 
    this.setState({ 
     rules: { 
     ...this.state.rules, 
     ruleAndregulations: { 
      ...this.state.rules.ruleAndregulations, 
      [guid()]: { 
      _id: guid(), 
      value: '' 
      } 
     } 
     } 
    }); 
    }; 

    handleRemoveRules = (e, num) => { 
    this.setState({ 
     rules: { 
     ...this.state.rules, 
     ruleAndregulations: removeByKey(this.state.rules.ruleAndregulations, num) 
     } 
    }); 
    }; 

    handleChange = e => { 
    this.setState({ 
     rules: { 
     ...this.state.rules, 
     ruleAndregulations: { 
      ...this.state.rules.ruleAndregulations, 
      [e.target.name]: { 
      _id: e.target.name, 
      value: e.target.value 
      } 
     } 
     } 
    }); 
    }; 

    handleSave = e => { 
    e.preventDefault(); 
    const ruleObj = { rule_regulations: [] }; 
    const { ruleAndregulations } = this.state.rules; 
    Object.keys(ruleAndregulations).map(val => 
     ruleObj.rule_regulations.push(ruleAndregulations[val].value) 
    ); 
    this.props.postRules(ruleObj); 
    }; 

    render() { 
    const { rules } = this.state; 
    console.log('state', this.state); 
    return (
     <div className="basic-property"> 
     Add Rules and Regulations 
     <span className="circleInputUi" onClick={this.handleAddRules}> 
      + 
     </span> 
     {rules && 
      rules.ruleAndregulations && 
      <RulesInputContainer 
      handleChange={this.handleChange} 
      handleRemoveRules={this.handleRemoveRules} 
      handleSave={this.handleSave} 
      value={rules.ruleAndregulations} 
      />} 
     </div> 
    ); 
    } 
} 

export default connect(mapStateToProps, mapDispatchToProps)(Rules); 

减速机发布是

case POST_RULES_SUCCESS: 
     return state 
     .merge({ 
      loading: false, 
      error: null, 
      response: action.response.message 
     }) 
     .update('rules', rules => rules.push(fromJS(action.response.data))); 

代码

https://gist.github.com/MilanRgm/7f744ee27df7e5d17410ffcba99fb89c

张贴我得到componentWillReceiveProps

以下数据后

当使用的concat

a）在第一个规则被添加

b）如果第二规则添加

Answer 1

它看起来像你是push列表成列表，而不是concat。在你减速，尽量

.update('rules', rules => rules.concat(fromJS(action.response.data)));