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

Posted 2023-02-23

【中文标题】React - 状态在一个父函数中定义，但不在从子函数调用的另一个父函数中

【英文标题】：React - State is defined in one parent function, but not in the other parent function being called from the child

【发布时间】：2021-05-17 22:05:00

【问题描述】：

我正在重新学习 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;

我觉得这是显而易见的事情，但我已经看过并找不到任何明确的答案

【问题讨论】：

您错过了将this 绑定到您的handleAdd 和handleRemove 函数，因此当从子组件访问时，this.setState 的this 不是父组件的this。您可以在构造函数中执行此操作，也可以简单地将它们转换为箭头函数。

太棒了，很好地解释了为什么绑定是必要的，谢谢

【参考方案1】：

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

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

问题是在将handleRemove() 传递给我的List 时，我需要添加.bind(this)，如下所示：

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

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

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

更新：见上面的评论

【讨论】：

对于初学者，不要像这样绑定函数，使用箭头函数，查看文档FAQ了解如何在类组件中绑定方法。