我需要使用 useContext 和 map 函数更新 React 中的数组状态

Posted 2023-04-14

技术标签:

【中文标题】我需要使用 useContext 和 map 函数更新 React 中的数组状态【英文标题】：I need to update array state in React using useContext and map function 【发布时间】：2020-12-11 03:28:04 【问题描述】：

所以我正在为我和我的朋友开发一个电影应用程序。我之前有一篇关于类似问题的帖子，但我现在遇到了一个不同的问题，尝试使用 useContext 和数组更新我的 movieList 的状态

这是我的 useContext 数组结构：

        
            id: 0,
            name: "Alpha",
            ranking: "0"
        ,
        
            id: 1,
            name: "Bravo",
            ranking: "0"
        ,
        
            id: 2,
            name: "Charlie",
            ranking: "0"
        ,
    ]);

我已经能够使用默认 id 和排名值添加新电影，但我希望应用程序转到“投票”页面，我们都在该页面提交投票，并使用输入框更新电影排名值。

我不确定如何更新它的状态。我知道我必须使用 onChange 方法，但每次我调用 movieList 时，它都没有定义为数组

【问题讨论】：

【参考方案1】：

您可以使用 UseReducer 挂钩处理这些复杂的状态更改。 https://reactjs.org/docs/hooks-reference.html#usereducer

【讨论】：

【参考方案2】：

要从消费者更新上下文中的值，您必须更新传递给上下文的值。

假设App 组件具有您的主要内容的状态，并且您将此状态传递给上下文提供程序，因此您需要从 App 更新状态，而不是直接更新上下文。您可以使用由 props 传递给子组件的回调函数来做到这一点，甚至可以将此回调函数作为属性放在您的上下文中。

const state, updateState = myContextConsumer

有一个相关的问题也可能对您有所帮助： How to update the Context value in Provider from the Consumer

【讨论】：