Question

我有以下子组件：

    class Adjust extends Component {
        render() {
        const { values, toggleSelector, SELECTOR } = this.props;
        console.log("values are", values"); //this is only being entered once right now
        
        return(
        <div
        key={values}
        style={{
          marginBottom: "25px",
          width: "80vw",
        }}>
         <button
                buttonSelected={values[index]?.add}
                onClick={() => {
                  toggleSelector(index, SELECTOR.ADD);
                }}
          >
         "Add"
        </button>
       </div>
      )}}

这就是我向这个孩子传递道具的方式

<Adjust  values={values} SELECTOR={SELECTOR} toggleSelector={this.toggleSelector}> </Adjust>

我在父组件中的 toggleSelector 函数中有一个控制台日志，显示正在进入，但即使状态发生变化，Adjust 组件的渲染也没有进入再次。

我曾尝试向其添加密钥，但没有帮助。

这是toggleSelector函数

      toggleSelector(index, selector) {
        console.log("enter");
        let { values } = this.state;
        values[index][selector] = true;
        if (selector === SELECTOR.ADD) {
          values[index].subtract = false;
        } else if (selector === SELECTOR.SUBTRACT) {
          values[index].add = false;
        } 
        this.setState({
          values,
        });  

}

当 Adjust 不是子组件而是在父组件中时，这一切正常。不得不让它成为一个孩子以获得更好的代码可读性

Answer 1

您不会像管理不可变变量那样管理 values，values 是渲染之间的同一个数组，您只需更新它的内容。

您可以在此处找到更多信息Correct modification of state arrays in React.js

父状态更改时子组件不更新

1 个答案: