클릭시 반응 상태 업데이트

Question

다음과 같이 데이터 구조를 나열하는 작은 구성 요소가 있습니다. 내가 뭘하고 싶은지 update 버튼을 클릭 할 때 vote 키를 증가시키고 싶지만, 제대로 할 수있는 방법을 찾지 못했습니다. data 상태를 전체적으로 업데이트해야합니까? 나는 그것에 대해 거의 혼동하지 않는다.

let MOCKDATA = [ 
      { 
      id: 1, 
      name: 'Test 1', 
      vote: 0 
      }, 
      { 
      id: 2, 
      name: 'Test 2', 
      vote: 2 
      }]; 

LinkListPage.js

import React from 'react'; 
// import LinksData from '../LinksData'; 
import Links from './Links'; 
// import update from 'react-addons-update'; 

//localStorage.setItem('linksData', JSON.stringify(LinksData)); 

let MOCKDATA = [ 
     { 
     id: 1, 
     name: 'Test 1', 
     vote: 0 
     }, 
     { 
     id: 2, 
     name: 'Test 2', 
     vote: 2 
     }]; 



class LinkListPage extends React.Component { 
    constructor(props, context) { 
    super(props, context); 
    this.state = { 
     data: MOCKDATA 
    }; 

    this.update = this.update.bind(this); 

    } 

    componentDidMount() { 
    } 

    update() { 
    // this.setState({ 
    // data: 
    // }) 

    } 

    render() { 

    let list = this.state.data.map(links => { 
     return <Links key={links.id} update={this.update} data={links} />; 
    }); 

    return (
     <div> 
     <ul>{list}</ul> 
     {console.log(this.state.data)} 
     </div> 
    ); 
    } 

} 

export default LinkListPage; 

LinksPage.js

import React, {PropTypes} from 'react'; 

const Links = (props) => { 
    return (
    <li> 
     <p>{props.data.name}</p> 
     <p>{props.data.vote}</p> 
     <button onClick={props.update}>Up</button> 
    </li> 
); 
}; 

Links.propTypes = { 
    data: PropTypes.object, 
    name: PropTypes.string, 
    vote: PropTypes.number, 
    update: PropTypes.func 
}; 

export default Links; 

HomePage.js

import React from 'react'; 
import LinkListPage from '../containers/LinkListPage'; 

const HomePage =() => { 
    return (
    <div> 
     <LinkListPage /> 
    </div> 
); 
}; 

export default HomePage; 

답변을 읽은 후 나의 최종 결과는 다음과 같습니다. 어쨌든 고마워.

LinksPage.js

const Links = (props) => { 
    return (
    <li> 
     <p>{props.data.name}</p> 
     <p>{props.data.vote}</p> 
     <button onClick={() => props.update(props.data.id)}>Up</button> 
    </li> 
); 
}; 

LinkListPage.js이 경우

update(id) { 
    const findId = LinksData.filter(item => { 
     item.id === id ? item.vote++ : false; 
    }); 

    const data = Object.assign(...findId, LinksData); 


    this.state.data.sort((a, b) => { 
     return b.vote - a.vote; 
    }); 
    //localStorage.setItem('linksData', JSON.stringify(this.state.data)); 

    this.setState({data}); 

    } 

Answer 1

, 나는 LinksPage 구성 요소에 onClick 핸들러를 추가합니다.

class Links extends React.Component { 

    constructor(props) { 
    super(props); 
    this.onClick = this.onClick.bind(this); 
    } 

    onClick(e) { 
    // here you know which component is that, so you can call parent method 
    this.props.update(this.props.data.id); 
    } 

    render() { 
    return (
     <li> 
     <p>{this.props.data.name}</p> 
     <p>{this.props.data.vote}</p> 
     <button onClick={this.onClick}>Up</button> 
     </li> 
    ); 
    } 
}; 

그리고 당신의 update 기능 변경 다음 LinkListPage 구성 요소의 방법을 업데이트 할

class LinkListPage extends React.Component { 
    constructor(props, context) { 
    super(props, context); 
    this.state = { 
     data: MOCKDATA 
    }; 
    this.update = this.update.bind(this); 
    } 

    update(itemId) { 
    // TODO: find and update your item, you can do it since you have an 'id' 
    const data = [...]; 
    this.setState({ 
     data, 
    }); 
    } 
} 

Answer 2

// 패스 링크 ID를. 심판 지점이 업데이트 방법 원인 상태에 대한 깊은 이해를 위해 https://www.sitepoint.com/immutability-javascript/

// 사용 immutablejs 또는 ES6을 업데이트를 처리하기 위해 반드시 숙지하는 것은

update(id) { 
 
//find and update your item, you can do it since you have an 'id' 
 
//follow link: http://codereview.stackexchange.com/questions/43438/writing-a-function-to-add-or-modify-an-existing-object-inside-an-array 
 
    // this.setState({ 
 
    // data: 
 
    // }) 
 

 
    } 
 
const Links = (props) => { 
 
    return (
 
    <li> 
 
     <p>{props.data.name}</p> 
 
     <p>{props.data.vote}</p> 
 
     <button onClick={() => props.update(props.id)}>Up</button> 
 
    </li> 
 
); 
 
};