时间戳

首页 > 解决方案 > React - 状态是在一个父函数中定义的，但不是在从子函数调用的另一个父函数中

reactjs - React - 状态是在一个父函数中定义的，但不是在从子函数调用的另一个父函数中

问题描述

我正在重新学习 React，并尝试构建一个简单的 TODO 应用程序，您可以从中添加和删除项目。

我的问题是打电话时handleRemove()。这两个函数都在我的父组件中，我可以传递handleRemove()给我的子组件。但是当我尝试在 handleRemove 中设置状态时，它出现为未定义。我不知道为什么，看到它几乎一样handleAdd()

这是我的待办事项：

import React from 'react';
import List from './List';

export default class Todo extends React.Component{

        state= {
            listItems: [],
            count: 0
        }    

    
    handleAdd = (itemToAdd) =>{
        document.querySelector("#input").textContent="";


        this.setState(prevState => ({
            listItems: [...prevState.listItems, itemToAdd],
            count: prevState.count+1
        }))
    }


    handleRemove = (itemToRemove) =>{
        

        let newListItems = this.state.listItems;
        let indexOfRemove = newListItems.indexOf(itemToRemove);
        newListItems.splice(indexOfRemove, 1);


        console.log(newListItems);

        //Setting listItems to the newly created newListItems
        this.setState(prevState => ({
            listItems: newListItems,
            count: prevState.count-1
        }))
    }

    render(){
        return(
            <div>
                <p>Number of items: {this.state.count}</p>
                <input type="text" id="input"/>
                <button onClick={() => this.handleAdd(document.querySelector("#input").value)}>Add</button> 
                <List removeHandle={this.handleRemove} items={this.state.listItems}/>
            </div>
        )
    }
}

这是我的清单：

import React from 'react';

function List(props){
        console.log(props); // props all show up as they're supposed to here
        
        return(
            <ol>
                {
                    props.items.map((item, index) => {
                        return(
                            <div key={index}>
                                <li key={index}>{item}</li>
                                <button onClick={() => props.removeHandle(item)}>Remove from list</button>
                            </div>
                            
                        );
                    })
                }
            </ol>
        )
    }
export default List;

我觉得这很明显，但我看过但找不到任何明确的答案

标签： reactjsfunctionclasscomponentsstate

解决方案

好的，发布后5分钟才找到解决方案，经典。

对于试图将所有状态逻辑保持在正确位置时感到困惑的任何初学者，我都会继续这样做。

问题是当传递handleRemove()给 my时List，我需要添加 . bind(this)，像这样：

<List removeHandle={this.handleRemove.bind(this)} items={this.state.listItems}/>

不完全确定为什么需要它，但我会调查它。

如果有人知道为什么.bind()需要，请随时发表评论

更新：见上面的评论

推荐阅读