Question

我有一个问题，我要从我的子组件访问我的父组件内的方法内的状态，它返回一个未定义的值，我确信它首先具有一个对象的值阵列。

父组件：

class BoardList extends React.Component {
    constructor(props){
        super(props);

        this.state = {
            lists: []
        };
    }

    componentWillMount(){
        this.props.getBoardLists()
        .then((result) => {
            this.setState({
                lists: result
            });
        })
        .catch(error => {
            console.log(error);
        });
    }

    addBoardLists(result){
        // This is i'm getting my undefine state lists :(
        console.log(this.state.lists);
        this.setState({
            lists: this.state.lists.concat([result])
        });
    }

    render() {

        const { isLoading,data } = this.props;

        if(isLoading){
            return (
                <Loading />
            );
        }

        return (
            <div className={style.boardListContainer}>
                <h1 className={style.boardListTitle}>Personal Board</h1>
                <Row>
                    <BoardItem item={this.state.lists} />
                    <BoardAdd onDisplay={this.fetchBoardLists} onAddItem={this.addBoardLists} />
                </Row>
            </div>
        )
    }
}

子组件：

class BoardAdd extends React.Component {

    constructor(props){
        super(props);

        this.state = {
            name: '',
            boardAddModalShow: false
        }

    }

    openAddBoardModal(){
        this.setState({ boardAddModalShow: true });

    }

    closeAddBoardModal(){
        this.setState({ boardAddModalShow: false });
        this.props.dispatch(reset('BoardAddModalForm'));
    }

    addBoard(formProps) {
        this.props.addBoard(formProps).then((result) => {
            // This is where I access my addOnItem from my parent component
            this.props.onAddItem(result);
            this.props.dispatch(reset('BoardAddModalForm'));
            this.closeAddBoardModal();
        })
        .catch(error => {
            console.log("error");
            console.log(error);
        });
    }
}

Answer 1

也许这会有所帮助？

class BoardList extends React.Component {
    constructor(props){
        super(props);

        this.state = {
            lists: []
        };
        this.addBoardList.bind(this)
    }

这个神奇的.bind是什么？您应该阅读JavaScript中this的含义（它几乎从不认为您认为它意味着什么）。默认情况下，ES6构造函数不会绑定（在我看来有些疯狂的原因），它们自己的方法是自己的this值。因此，您方法中的this指的是您正在考虑的完全不同的this，因此使这种情况非常奇怪。

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/this

在从子级访问父级时获取未定义的状态 - React

1 个答案: