Javascript 将元素从一个数组单击到另一个数组。新数组对象中的内容是否为空/未复制？

晚上好,

作为一个学习项目，我想建立一个简单的“学习卡”应用程序。结构很简单：你有带问题的卡片。单击按钮后，可以显示正确的解决方案。您也可以单击“问题解决”将学习卡移动到免除卡

我正在努力实现“将学习卡移到赦免卡”部分。我有一个“问题”数组。在“onSolvedClick”之后，已解决的卡被复制到“已解决”数组中，该数组被设置为新的已解决状态

当我点击“Frage gelöst”（已解决问题）按钮时，一张新卡片出现在已解决问题区域。问题是：新卡是空的（没有问题/答案）。如果有人能在这一点上帮助我，那就太好了！我今天已经在这个问题上花了好几个小时了

我猜我的错误在App.Js代码中，可能是在“onSolvedKlick”或“solveFragen”中

非常感谢

App.Js：

import React, {Component} from 'react';
import CardList from './CardList.js';
import { fragen } from './fragen';
import SearchBox from './SearchBox';


class App extends Component { // As Class to access objects

    constructor () {
        super();
        this.state = {  // State needed to change state
            fragen: fragen,
            solved : [] ,
            searchfield: ''
        }
    }

    onSearchChange = (event) => {

        this.setState({searchfield: event.target.value});

    }

    onSolvedKlick = (id) => {
        console.log("Klick on solved"+id);
        var frage = this.state.fragen.filter(function(e) // Bei Klick auf Solved: filtere aus Ursprungsarray das Element mit gelöster iD
        {
            return e.id === id;
        });

        console.log(frage);
        const newSolvedArray = this.state.solved.slice();
        newSolvedArray.push(frage);
        this.setState({solved: newSolvedArray});

    }



    render(){ // DOM rendering
        const filteredFragen = this.state.fragen.filter(fragen =>{
            return fragen.frage.toLowerCase().includes(this.state.searchfield.toLowerCase());
        })

        const solveFragen = this.state.solved; 



        return(
            <div className='tc'>

                    <h1>Learning Cards</h1>
                    <SearchBox searchChange={this.onSearchChange}/>
                    <h2>Cards: To be learned!</h2>
                    <div>
                    <CardList fragen={filteredFragen} onSolvedKlick={this.onSolvedKlick}/>
                    <CardList fragen={solveFragen} onSolvedKlick={this.onSolvedKlick}/>
                    </div>




            </div>

        )

    }



}

export default App;

---

在您的

onSolvedKlick

功能上尝试以下操作：

    onSolvedKlick = (id) => {
        console.log("Klick on solved"+id);
        var frage = this.state.fragen.filter((e) => e.id === id);   
        this.setState({solved: [...this.state.solved, frage]});
    }

尽量避免这么多空行。

---

同时，代码始终使用英语，以便其他人更容易理解。我也很幸运是德国人：）

假设您想将问题从

fragen

数组转移到

已解决的
数组，下面是如何做到这一点

onSolvedKlick = id => {
    console.log("Klick on solved" + id);
    var elementPos = this.state.fragen.map(function(x) {return x.id; }).indexOf(id); // Find the position of the selected item in the fragen 
    const currentItem = this.state.fragen.splice(elementPos,1)
    const newSolvedArray = this.state.solved;
    newSolvedArray.push(currentItem[0]);//splice gives an array
    this.setState({ solved: newSolvedArray }, function() {console.log(this.state)});
  };

很抱歉，这无法回答您的问题，但您为什么选择将其移动到新阵列中？你不能管理对象本身的标志吗？谢谢你的评论-你能提出一个如何解决这个问题的建议吗？谢谢你的回答！不幸的是，它没有帮助，新卡仍然是空的：（谢谢你的提示；将来一定会处理好的。事实上，我没想到有人会看到我的代码：DDoS正确的frage登录到onSolvedKlick控制台？你能试试
onSolvedKlick=（事件，id）=>{…}
不起作用。但我发现：我的“fragen”数组是嵌套的。因此，我需要推送frage[0]。现在它可以工作了！无论如何，感谢您的帮助！
export const fragen = [
  {
    id: 1,
    frage: 'What are trends in CPU design?',
    antwort: 'Multi-core processors, SIMD support, Combination of core private and shared caches Heterogeneity, Hardware support for energy control',
    topic: 'Cloud'
  },
   {
    id: 2,
    frage: 'What is typical for multi-core processors?',
    antwort: 'Cache Architecture (L1 private to core, L2 private to tile), Cache Coherence',
    topic: 'Cloud'
  },
   {
    id: 3,
    frage: 'What memory modes exist?',
    antwort: 'Flat mode, Cache Mode, Hybrid Mode',
    topic: 'Cloud'
  },
 {
    id: 4,
    frage: 'What memory modes exist?',
    antwort: 'Flat mode, Cache Mode, Hybrid Mode',
    topic: 'Cloud'
  },

];

    onSolvedKlick = (id) => {
        console.log("Klick on solved"+id);
        var frage = this.state.fragen.filter((e) => e.id === id);   
        this.setState({solved: [...this.state.solved, frage]});
    }

onSolvedKlick = id => {
    console.log("Klick on solved" + id);
    var elementPos = this.state.fragen.map(function(x) {return x.id; }).indexOf(id); // Find the position of the selected item in the fragen 
    const currentItem = this.state.fragen.splice(elementPos,1)
    const newSolvedArray = this.state.solved;
    newSolvedArray.push(currentItem[0]);//splice gives an array
    this.setState({ solved: newSolvedArray }, function() {console.log(this.state)});
  };