Question

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

Answer 1

根据您对mapStateToProps的使用，您似乎正在使用Redux。您的书籍列表来自Redux商店props，它位于组件外部。

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

反应单击按钮以呈现页面

1 个答案: