Javascript 单击“反应”按钮以呈现页面

在

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);

import React，{Component}来自'React'；
从'react redux'导入{connect}；
从“../actions/index.js”导入{selectUser}；
从“../actions/index.js”导入{deleteBook}；
从“lodash”进口；
类myPage扩展组件{
建造师（道具）{
超级（道具）；
此.state={
删除：0
}
}
componentWillMount（）{
this.props.selectUser（this.props.params.id）；
} 
renderList（）{
返回此.props.list.map（（list）=>{
返回(

{list.title}
{
this.props.deleteBook（list.book\u id）；
this.setState（{delete:list.book_id}）；
}}>
删除

);
})
}
render（）{
const{user}=this.props；
const{list}=this.props；
如果（用户）{
返回(
加入日期：{user.user.Joined}
我的页面
用户名：{user.user.Username}
我的书：
{this.renderList（）}
)
}
}
}
函数MapStateTops（状态）{
返回{
用户：state.user.post，
列表：state.list.all
}
}
导出默认连接（MapStateTops，{selectUser，deleteBook}）（myPage）；
根据您使用的
MapStateTrops
，您似乎正在使用Redux。您的书籍列表来自Redux商店，作为组件外部的
props

组件中不需要
此.state.delete
。由于状态是由Redux管理的，所以该bug似乎存在于Redux代码中，而不是React代码中。查看还原程序，确保正确处理删除项操作。
已将组件状态初始化为
this.state={delete:0}
。这表示正在删除的MyPage组件还是正在删除的书籍？（同样，你的类
myPage
应该是
myPage
）@stifle这只是虚拟数据，实际上没有任何作用。我只是把this.state={delete:0}放在这里，这样一旦我单击delete按钮，组件就会重新呈现。这是可行的，但我需要转到另一个链接，然后回来查看要删除的书籍列表。我想找到一个方法，在该方法中，单击“删除”，组件将呈现，因此选定的图书列表将消失。我认为setState会重新呈现组件，但它似乎没有呈现。请使用componentDidMount而不是componentWillMount。接下来，这是设置组件的更安全的方法。