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

【问题标题】：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) //函数调用 }}

标签： javascript reactjs

【解决方案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://stackoverflow.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 使用钩子。