javascript - 将 onclick 元素从一个数组移动到另一个数组。新数组对象中的内容为空/未复制？

Question

晚上好

作为一个学习项目，我想构建一个简单的“学习卡片”应用程序。结构非常简单:你有带有问题的卡片。单击按钮后，您可以显示正确的解决方案。您也可以点击“已解决的问题”将学习卡片移至已解决的卡片。

我正在努力实现“将学习卡移至免除”卡部分。我有一个“问题”数组。在“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;

CardList.js:

import React from 'react';
import Card from './Card';

const CardList = ({fragen, onSolvedKlick}) => {
    const cardComponent = fragen.map( (user, i) => {
        return(<Card key={i} id={fragen[i].id} frage = {fragen[i].frage} antwort = { fragen[i].antwort} onSolvedKlick = {onSolvedKlick}/>);
            }
        )


    return (
        <div>
            {cardComponent}

        </div>


        );



}

export default CardList;

卡片.js:

import React, {Component} from 'react';
import 'tachyons';



class Card extends Component {
  constructor(props) {
    super(props);
    this.state = {
        frage : props.frage,
        showAnswer : false
    };
  }



  _showAnswer = () => {
    const before = this.state.showAnswer;
    const after = !before; 
    this.setState({
      showAnswer: after
    });
  }



  render() {


    return (
        <div className ="fl w-50 w-25-m w-20-l pa2 bg-light-red ma3"> 
            <div>
                <h2>{this.props.frage}</h2>
                 { this.state.showAnswer && (<div>{this.props.antwort}</div>) }
                 <p></p>
                <input type="button" value="Antwort anzeigen"  className ="ma2"
                onClick={this._showAnswer.bind(null)}
                    />

                <input type="button" name="solved" value="Frage gelöst" className = "ma2 bg-light-green" 
                onClick={() =>this.props.onSolvedKlick(this.props.id)}
                    />

            </div>

        </div>
    );
  }
}

fragen.js(问题):

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'
  },

];

Answer 1

在您的 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]});
    }

尽量避免出现这么多空行。 还要始终使用英文编写您的代码，以便其他人更容易理解。我也有幸成为德国人:)