setState warning 求教

来源:5-8 使用 actionCreator 统一创建 action

powerful_girl

2021-08-11

老师,在完成这一章代码后,todolist 可以正常使用,添加删除都没有问题。但是 console 里面报了一个 warning,还请老师指点这个啥错?(代码都是按照老师上课讲解的方式来写的)
图片描述

import React, {Component} from 'react';
import 'antd/dist/antd.css';
import { Input,Button, List } from 'antd';
import {getInputChangeAction, addTodoItemAction, deleteTodoItemAction} from './store/actionCreators';
import store from './store/index.js';

class TodoList extends Component {
    constructor(props){
        super(props);
        this.state = store.getState();
        this.handleInputChange = this.handleInputChange.bind(this)
        this.handleStoreChange = this.handleStoreChange.bind(this)
        this.handleBtnClick = this.handleBtnClick.bind(this)
        // this.handleDeleteItem = this.handleDeleteItem.bind(this)
        store.subscribe(this.handleStoreChange);
    }

    render(){
        return (
        <div style={{marginTop:'10px', marginLeft:'10px'}}>
            <div>
                <Input 
                    value={this.state.inputValue} 
                    placeholder='todo info' 
                    style={{width:300, marginRight:'10px'}} 
                    onChange={this.handleInputChange}
                />
                <Button onClick={this.handleBtnClick} type="primary">Submit</Button>
            </div>
            <List
                style={{marginTop: '10px', width:'300px'}}
                bordered
                dataSource={this.state.list}
                renderItem={(item,index) => (
                    <List.Item onClick={this.handleDeleteItem.bind(index)}>{item}</List.Item>
                )}
            />
        </div>
        )
    }
    handleInputChange(e){
        const action = getInputChangeAction(e.target.value)
        store.dispatch(action);

    }

    handleStoreChange(){
        this.setState(store.getState());
    }
    handleBtnClick(){
        const action = addTodoItemAction()
        store.dispatch(action);
    }

    handleDeleteItem(index){
        const action =deleteTodoItemAction(index)
        store.dispatch(action);
    }
}

export default TodoList
写回答

1回答

Dell

2021-08-11

在componentDidMount 里面调用  

store.subscribe(this.handleStoreChange);


0
0

React零基础入门到实战,完成企业级项目简书网站开发

主流新技术 React-redux,React-router4,贯穿基础语法

5275 学习 · 2496 问题

查看课程