如何正确检查react useContext 中的值并返回语句

问题描述

我目前使用 React.useContext 来存储一个包含这样的对象的数组：

{
 enable: true,id: 1
}

我做了一个开关，将数组中的值从 true 更新为 false。我已经完成了艰苦的工作，有一堆代码不需要解释，但我很确定它是有效的，因为最后，当尝试控制台记录结果时，切换器确实发生了变化从 [true] 到 [false] 再返回到 [true] 的值，没有错误。

我想要实现的是简单地返回一个 div 并将 div id 从红色更改为蓝色，以确定值是 [true] 还是 [false]。

我认为可以做到的最简单的方法是：

const myComponent = () => {

     const [value,setValue] = React.useContext(ValueContext);
        
         const checkEnable = value.filter((item) => (item.id === 1)).map((Item) => (
            Item.enable
          ));

     return (
            <div id={checkEnable === true ? "red" : "bue"} > </div>
            (
    
};

我也试过这个方法

const setId = (checkEnable) => {
    if (checkEnable === true) {
      return "red"
    } else {
      return "blue"
    };

  }

并返回

<div id={setId(checkEnable) >

同样，控制台记录 checkEnable 实际上确实返回 [true] 或 [false]，所以我认为在这个阶段之前工作没有错误。但是三元运算符/语句的结果仅为 [true] 并且 div id 没有从红色变为蓝色。我在这段代码中有什么东西吗？感谢所有建议。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）