数组元素未更新到与其先前状态相反的状态

Posted 2023-03-16

【中文标题】数组元素未更新到与其先前状态相反的状态

【英文标题】：Array element not updating to the opposite of its previous state

【发布时间】：2021-07-05 14:56:22

【问题描述】：

我正在尝试在调用函数时更新我的​​数组的特定索引的状态。但是，即使多次单击，该值也不会更新。

我从 componentDidMount 中的 const EDITABLES 中提取了以下数组：

values = EDITABLES.map((data) => 
  return 
    id: data.id,
    value: financials[data.id],
    table: data.table,
    add: false,
    minus: false,
  ;
);

this.setState(
        values,
      );

渲染时我像这样映射数组：

EDITABLES.map((data, index) => 
              
              console.log(values[index]?.add, "bool"); //despite calling a function to change the state of add in values it remains the same 
              return (
                <Row
                  key=index
                  style=
                    gridTemplateColumns: "22% 25% 2% 25% 25% 21%",
                    display: "grid",
                  
                >
                  <p>
                    data.name
                  </p>
                  <div>
                    <CompleteButton //CompleteButton is a styled div
                      isAdd=values[index]?.add 
                      onClick=() => 
                        this.changeFalse(index) //function call
                      
                    >
                    </CompleteButton>
                  </div>

这就是 changeFalse 函数的样子：

    changeFalse(index) 
    this.setState((prevState) => (
      values: 
        ...prevState.values,
        [prevState.values[index].add]: !prevState.values[index].add,
      ,
    ));
  

无论我点击多少次按钮，它都不会更新和sti;;仍然是“假”，我不知道为什么

【问题讨论】：

你可以尝试像这样将索引作为参数传递给箭头函数吗 onClick=(index) => this.changeFalse(index) //函数调用

【参考方案1】：

首先，您将EDITABLE_FINANCIALS 值设置为状态，但您不是从状态渲染它们，而是渲染原始EDITABLE_FINANCIALS。

尝试this.state.values.map(...)，而不是映射EDITABLE_FINANCIALS。

其次，在您的处理程序changeFalse 中，您将values 设置为一个对象。

你想要做的是这样的：

 toggleAdd(index) 
    this.setState((prevState) => 
    const newValues = [...values]
     newValues[index].add = !newValues[index].add

     return  values: newValues 
    );
  

【讨论】：

据我了解，我是否需要将值设置为数组而不是对象？

@user12414630 是的，完全正确。

【参考方案2】：

那不是因为你是onClick 是在CompleteButton 上，这是一个styled.div 尝试将onClick 放在div 上面CompleteButton。

【讨论】：

函数被调用，我加了一个console.log来确认

试试强制更新怎么样？ https://***.com/questions/30626030/can-you-force-a-react-component-to-rerender-without-calling-setstate

这里有如何使用 forceUpdate 的例子吗？如果我保持我的代码与发布的代码相同，除了在 changeFalse 函数的第二行将 this.setState 更改为 this.forceUpdate 之外，我会得到一个 TypeError: Cannot read property 'values' of undefined

我想知道为什么你的关键是[prevState.values[index].add] 还不够prevState.values[index].add 吗？对不起，我只能使用钩子编码。我只使用了forceUpdate 使用钩子。