反应点击按钮呈现页面

在renderList()中，我有一个删除按钮，点击后会删除内容。我不确定把setState放在哪里，所以我把它放在onClick()的里面。这不起作用。我想知道我是否正确地做了这件事，或者是否有更好的方法来解决这个问题。反应点击按钮呈现页面

的onClick功能

onClick={() => { 
    this.props.deleteBook(list.book_id); 
    this.setState({delete: list.book_id}); 
}}>

React.js

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import { selectUser } from '../actions/index.js'; 
import { deleteBook } from '../actions/index.js'; 
import _ from 'lodash'; 

class myPage extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      delete: 0 
     } 
    } 

    componentWillMount() {  
     this.props.selectUser(this.props.params.id); 
    } 


    renderList() { 
      return this.props.list.map((list) => { 
      return (
       <li className='book-list' 
        key={list.book_id}> 
         {list.title} 
         <button 
         value={this.state.delete} 
         onChange={this.onClickChange} 
         onClick={() => { 
          this.props.deleteBook(list.book_id); 
          this.setState({delete: list.book_id}); 
         }}> 
         Delete 
         </button> 

       </li> 
      ); 
     }) 
    } 

    render() { 
     const {user} = this.props; 
     const {list} = this.props; 
     if(user) { 

      return(
       <div> 
        <h2>Date Joined: {user.user.joined}</h2> 
        <h1>My Page</h1> 
        <h2>Username: {user.user.username}</h2> 
        <div>My Books: 
          <h1> 
           {this.renderList()} 
          </h1> 
        </div> 
       </div> 
      ) 
     } 
    } 
} 
function mapStateToProps(state) { 
    return { 
     user: state.user.post, 
     list: state.list.all 
    } 
} 
export default connect(mapStateToProps, { selectUser, deleteBook })(myPage);

来源

2017-04-12 Yh1234

您将组件状态初始化为'this.state = {delete：0}'。这是否表示正在删除的MyPage组件或要删除的图书？（你的班级'myPage'应该是'MyPage'） – styfle

@styfle这只是虚拟数据，并没有做任何事情。我只是把this.state = {delete：0}，所以一旦我点击删除按钮，组件就会重新渲染。这有效，但我需要去另一个链接，回来的书名单走开。我想找到方法，你点击删除和组件呈现，所选图书清单消失。 – Yh1234

我以为setState重新渲染组件，但它似乎没有渲染。 – Yh1234

根据您所使用的mapStateToProps，好像你正在使用终极版。您的书籍列表来自Redux商店，名称为props，该组件位于该组件的外部。

组件中不需要this.state.delete。由于状态由Redux管理，看起来错误在您的Redux代码中，而不是React代码。查看缩减器并确保您正确处理删除项目操作。

来源

2017-04-12 02:26:51

反应点击按钮呈现页面

回答

相关问题