czy przypisanie props do state to bardzo powazny błąd?

Odpowiedz Nowy wątek
2018-06-13 16:40
0

Pytam, gdyż właściwe kończę projekt, kiedy go ostatni (prawie) raz przeglądałam otworzyła mi się strona na jakimś mocnym blogu gdzie jak byk stało, że tego się nie robi.
W moim wypadku wzięło się to stąd, że mam spory niezmienny obiekt sortowalny niezależnie po kilku właściwościach. Dla sortowania po każdej z nich mam button z hadlerem, który sortuje state. I to dziła, jest sprawdzone itd.
Próbowałam to przekomponować i przejąć propsy na zmienną w render, ale do tego nie ma dostępu handler sortowania niestety- pojawia się błąd, że to co trafia do handlera jest niezdefiniowane ( i na logikę jest, bo jest zdefiniowane dopiero w render).
A jeżeli tak być nie może, czy jest jakieś proste obejście?

Pozostało 580 znaków

2018-06-13 18:52
0

Słuchajcie, ja to pytanie traktuje serio nawet jeżeli dla Was jest oczywiste albo obnaża mój poziom...

Pozostało 580 znaków

2018-06-13 19:45
0

Pokaż kod

Pozostało 580 znaków

2018-06-13 19:59
0
Maciej Cąderek napisał(a):

Pokaż kod
Cały będzie za długi(chyba)

constructor(props) {
    super(props);
    this.state = {
        counter: 0,
        isTeam: 'null',
        tag: 'No matter',
        isSortNameAscending: false,
        isSortScoreAscending: false,
        isSortScoreRequired: false,
        dyscypliny: this.props.disciplines,
        //toSortbyScore: false,
        toSortByName:false

    };

tu jest konstruktor a istotna zmienna to dyscypliny

handleSortName(event) {
    this.setState({
        dyscypliny: sortByName(this.state.isSortNameAscending, this.state.dyscypliny)
    })
    this.state.isSortNameAscending === true ? this.setState({
        isSortNameAscending: false
    }) : this.setState({
        isSortNameAscending: true
    });

}

powyżej jest handler

To jest tylko kawałek kodu może najważniejszy. Cały jest tutaj (oczywiście tylko tego komponentu). To chodzi i jest sto razy sprawdzone i nie ma możliwości aby w tm zadaniu ten komponent dostał innego propsa w biegu. Wszystko grało dopóki nie przeczytałam tego bloga.
Tam są jeszcze wykomentowane moje próby modyfikacji


 /* 
 *
 * Component displaying and managing list of disciplines with calculated athlete score.
 */

import React from 'react'
import PropTypes from 'prop-types'
import './index.styl'
import { 
    disciplineScore,
    BestScore,
    WorstScore,
    unique,
    filtration,
    sortByName,
    sortByScore,
    individualOrTeam 
        } from '../../libs/calculate'
import Radio from '../../components/Radios'
import Form from '../../components/Form'

export default class Predictions extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        counter: 0,
        isTeam: 'null',
        tag: 'No matter',
        isSortNameAscending: false,
        isSortScoreAscending: false,
        isSortScoreRequired: false,
        dyscypliny: this.props.disciplines,
        //toSortbyScore: false,
        toSortByName:false

    };
    this.handleShowSport = this.handleShowSport.bind(this)
    this.handleChangeTeam = this.handleChangeTeam.bind(this);
    this.handleChangeTag = this.handleChangeTag.bind(this);
    this.handleSortName = this.handleSortName.bind(this);
    this.handleSortScore = this.handleSortScore.bind(this);
}

handleShowSport(ev) {
    const el = ev.target;
    const element = el.nextSibling;
    const visible = element.classList.contains('c-discipline__content-visible');
      if (visible == true) {
        element.classList.remove('c-discipline__content-visible');
        element.classList.add('c-discipline__content-hidden')
    } else {
        element.classList.remove('c-discipline__content-hidden');
        element.classList.add('c-discipline__content-visible')
    }

}

handleChangeTeam(event) {
    const t = event.target.value;
    switch (t) {
        case 'true':
            this.setState({
                isTeam: 'true'
            })
            break;
        case 'false':
            this.setState({
                isTeam: 'false'
            })
            break;
        case 'null':
            this.setState({
                isTeam: 'null'
            })
            break;
        default:
            this.setState({
                isTeam: 'null'
            })
    }

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

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

handleSortName(event) {
    this.setState({
        dyscypliny: sortByName(this.state.isSortNameAscending, this.state.dyscypliny)
    })
    this.state.isSortNameAscending === true ? this.setState({
        isSortNameAscending: false
    }) : this.setState({
        isSortNameAscending: true
    });

}

/*
handleSortName(event) {
    this.setState({toSortByName:true})

    this.state.isSortNameAscending === true ? this.setState({
        isSortNameAscending: false
    }) : this.setState({
        isSortNameAscending: true
    });
console.log(this.state.isSortNameAscending)
}
*/

handleSortScore(event) {

    this.setState({
        dyscypliny: sortByScore(this.state.isSortScoreAscending, this.state.dyscypliny)
    })
    this.state.isSortScoreAscending === true ? this.setState({
        isSortScoreAscending: false
    }) : this.setState({
        isSortScoreAscending: true
    });
}

//////////////////////////////////////////////////////////////////////////////////////////////////////////
render() {

//preparing criteria for filtration    
const test = {tag: this.state.tag, team: this.state.isTeam}
//preparing props for radios
const dataRadio =[{value:'null',text:'All'},{value:'false',text:'Team'},{value:'true',text:'isIndividual'}]
//preparing props for form
const formHeader ='Choose Tag'
let TagList = ['No matter'].concat(unique(this.props.disciplines.map((d) => d.tags)))
let Dyscypliny = this.state.dyscypliny;

//for every item adds score field with score vaule for this athlete
for(let d of Dyscypliny) {d.score= disciplineScore(this.props.athlete.skillset,d.requirements)}
let FiltrowaneDyscypliny = filtration(test, Dyscypliny)

//if(this.state.toSortByName){sortByName(this.state.isSortNameAscending, FiltrowaneDyscypliny);this.setState({toSortByName:false})}

const visibilityToggle = (this.props.isVisible)? '':'hidden';

const colorToggler =(discipline)=>{

    let bestscore  = BestScore(this.props.athlete.skillset,this.props.disciplines);
    let worstscore = WorstScore(this.props.athlete.skillset,this.props.disciplines);
    let best = discipline.score == bestscore? 'best-color':'';
    let worst = discipline.score == worstscore? 'worst-color':''
    return best+worst;
 }

 return (
<div className={ visibilityToggle}>
    <section className="l-section c-predictions">
        <h2 className="header">Predictions</h2>

        <div className='header-flexible'>
            <Radio dataRadio={dataRadio} isTeam={this.state.isTeam} fn={this.handleChangeTeam} />
            <Form header={ formHeader} TagList={ TagList} fn={ this.handleChangeTag} />
        </div>

        <div className='header-flexible'>
            <button className='button' onClick={ this.handleSortName}>Sort by discipline name</button>
            <button className='button' onClick={ this.handleSortScore}>Sort by total score</button>
        </div>
<div className="content">
    {FiltrowaneDyscypliny.map((discipline) => { return (
    <div key={discipline.name} className="c-discipline">
        <img src={`${discipline.photo}`} alt={ `${discipline.name}`} onClick={this.handleShowSport} className='sport-icon' />
        <div className="c-discipline__content-visible">
            <span className={` c-discipline__content-name ${colorToggler(discipline)}`}>
                {`${discipline.name} - ${discipline.score}`}
            </span>
            <span className="c-discipline__content-isIndividual">{`${individualOrTeam(discipline.isIndividual)}`}</span>
            <div className='c-discipline__content-Tags'> {discipline.tags.map((tag, index) =>{return(
                <span key={index}className="tags">{tag}</span>)})}</div>
        </div>
    </div>
    ) })}
</div>

</section>
</div>
)
}
}

Predictions.propTypes = {
    athlete: PropTypes.shape({
        name: PropTypes.string.isRequired,
        photo: PropTypes.string.isRequired,
        bio: PropTypes.string.isRequired,
        skillset: PropTypes.objectOf(PropTypes.number).isRequired,
        nativeDisciplines: PropTypes.arrayOf(PropTypes.string).isRequired,
    }).isRequired,
    disciplines: PropTypes.arrayOf(PropTypes.shape({
        name: PropTypes.string.isRequired,
        photo: PropTypes.string.isRequired,
        isIndividual: PropTypes.bool.isRequired,
        tags: PropTypes.arrayOf(PropTypes.string).isRequired,
        requirements: PropTypes.objectOf(PropTypes.number).isRequired,
    })).isRequired
}
edytowany 1x, ostatnio: Doctanna, 2018-06-13 20:00

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0