reactjs - 仅对父组件中选定的反应子项执行操作

问题描述

在我的反应应用程序中，我有一个父列表组件Tests：

 export class Items extends Component {

    static propTypes = {
        tests: PropTypes.array.isRequired,
        getItems: PropTypes.func.isRequired
    };

    componentDidMount() {
        this.props.getItems();
    }

    render() {
        return (
            <Fragment>
                <Filters />
                {this.props.items.map((item) => (
                    <Item key={item.id} item={item} />
                ))}
            </Fragment>
        );
    }
}

const mapStateToProps = (state) => ({
    items: state.items.items
});

export default connect(mapStateToProps, { getItems })(Items);

getItems和getItem操作：

export const getItems = () => dispatch => {
    axios.get('/api/items/')
        .then(res => {
            dispatch({
                type: GET_ITEMS,
                payload: res.data
            });
        })
        .catch(err => console.log(err))
    
export const getItem = (id) => dispatch => {
        axios.get(`/api/items/${id}`)
            .then(res => {
                dispatch({
                    type: GET_ITEM,
                    payload: id
                });
            })
            .catch(err => console.log(err))

和一个子项组件：

export class Item extends Component {

    render() {
        return (
            <div key={this.props.item.id} className="main"> 
               <p>{this.props.item.title}</p>
            </div>
        )
    }
}

const mapStateToProps = (state) => ({
    items: state.items.items
});

export default connect(mapStateToProps, { getItem })(Item);

当您单击项目组件获取它时，测试将在 map() 中重新呈现。我在第一次执行 map() 后得到结果。但随后this.props.tests得到一个空数组。如何处理 onClick 以便父组件不会重新渲染所有子组件？

标签： reactjsredux

reactjs - 仅对父组件中选定的反应子项执行操作

问题描述

解决方案

推荐阅读