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);

发布的reducer是

  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)));

点击保存按钮会额外增加一个空字段

1 个答案: