时间戳

首页 > 解决方案 > 子组件无法正确更新父组件中的状态更新

javascript - 子组件无法正确更新父组件中的状态更新

问题描述

简单地说，我有一个列表项，其中包含一个名称列表，单击任何列表项会更改该项目的颜色，这是我的逻辑：

const App = () => {

    const items = [
        {
            name: 'peter',
            id: 1
        },
        {
            name: 'Mark',
            id: 2
        },
        {
            name: 'john',
            id: 3
        }
    ]

    const [id, setId] = useState(null);
    const [names, setNames] = useState(items)

    const setClickedItemId = (id) => {
        setId(id)
    }

    const turnItemRed = () => {
        setNames(prev =>  prev.map(i => i.id === id ? {...i, color: 'red' } : i))

    }


    return (
        <div className="app">
            <ul className="items">
                {
                    names.map(i => {
                        return (
                            <Item 
                               item={i}
                                setClickedItemId={setClickedItemId}
                                turnItemRed={turnItemRed}
                            />
                        )
                    })
                }
            </ul>
        </div>
    )
}

function Item({item, ...props}) {
    const { name, id} = item;
    const { setClickedItemId, turnItemRed } = props;
    return (
        <li
            className={`${item.color === 'red' ? 'red' : ''}`}
            onClick={() => {
                setClickedItemId(id);
                turnItemRed()

            }}
        >{name}</li>
    )
}

ReactDOM.render(<App />, document.getElementById('root'))

这会呈现一个项目列表，我需要单击两次才能使项目变为红色，这意味着子组件不会捕获最新版本的状态，但是：

只需在父组件的 return 语句之前添加那行代码，

const showingItems = names.map(i => i.id === id ? {...i, color: 'red'} : i)

然后使用该变量showingItems来呈现列表而不是状态变量names使其正确并且不知道为什么

那么，为什么子组件Items在将状态存储在变量中使其工作时没有获得最新版本的状态？

标签： javascriptreactjsreact-state

解决方案

状态更新是批处理的，您的 onClick 会触发 2 个执行状态更新的函数。由于异步行为，第二个函数没有收到更新的值。

只需将 id 传递给turnItemRed函数，而不是从状态中获取它。

应用程序

    const turnItemRed = (id) => { //<----take the id
        setNames(prev =>  prev.map(i => i.id === id ? {...i, color: 'red' } : i))

    }

物品

function Item({item, ...props}) {
    const { name, id} = item;
    const { setClickedItemId, turnItemRed } = props;
    return (
        <li
            className={`${item.color === 'red' ? 'red' : ''}`}
            onClick={() => {
                setClickedItemId(id);
                turnItemRed(id) //<---- pass the id

            }}
        >{name}</li>
    )
}

编辑 上述问题的快速演示，修复在演示中。. 只需添加此内容，以便将来可能对其他读者有所帮助。

推荐阅读