反應點擊按鈕呈現頁面

在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

反應點擊按鈕呈現頁面

回答

相關問題