Question

我有一个简单的列表，该列表是从数据库获得的，并用.map()进行了迭代。我想将更多项目添加到此列表中，然后清除输入，因此我可以将新项目发送回“旧列表”。我该如何实现？最佳做法是？这是一个愚蠢的问题，所以我很抱歉。

this.state = {
  newRules: {
    rules: [],
    rulesTerm: ''
  }
};

handleInput = e => {
  let value = e.target.value;
  let name = e.target.name;
  console.log(value);
  console.log(name);

   this.setState(prevState => ({
     newRules: {
      ...prevState.newRules,
      [name]: value
     }
  }));
};

addRule = () => {
  e.preventDefault();
  let rules = this.state.field.rules;
  let newRules = this.state.newRules.rules

  rules.push(newRules)
  console.log(rules)

  this.setState({
    newRules: {
      rules: rules
    }
  }
 };

<ul>
  {this.state.db.rules.map(rule => {
    // this.state.db.rules is data from DB
     return <li key={rule}>{rule}</li>;
   })}
   {this.state.editMode ? (
     <form onSubmit={this.addRule}>
      <Input
        type="text"
        placeholder="regras"
        name="rules"
        onChange={this.handleRules}
        value={this.state.newRule}
      />
      <button type="submit">Adicionar +</button>
     </form>
   ) : null}
 </ul>;

谢谢！：）

Answer 1

如果您只想将两个数组一起加上一个数组项的总数，请检查Array.prototype.concat()方法。

<script src="https://cdnjs.cloudflare.com/ajax/libs/tone/13.7.1/Tone.js"></script>
<div>
  <button id="togglePlayback">Start</button>
</div>
<div id="results"></div>

Answer 2

方法1：concat

var array1 = ['a', 'b', 'c'];
var array2 = ['d', 'e', 'f'];

console.log(array1.concat(array2));
// expected output: Array ["a", "b", "c", "d", "e", "f"]

方法2：拼接

var months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// inserts at 1st index position
console.log(months);
// expected output: Array ['Jan', 'Feb', 'March', 'April', 'June']

从数据库添加项目到列表并在提交后清除输入

2 个答案: