单击时反应更新状态

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

在这种情况下，我想补充onClick处理程序LinksPage组件。

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功能：

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以更新LinkListPage组件的方法。 参考点读这个处理的更新深刻理解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> 
 
); 
 
};