父 state 更改时子组件不更新

Question

I have the following child component:

    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>
      )}}

And this is how I pass props to this child

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

I have a console log in my toggleSelector function in my parent component, which shows that it is being entered, but even though the state is changing, the render of Adjust component is not being entered again.

I have tried adding a key to it but that didn't help.

This is the toggleSelector function

      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,
        });  

}

This was all working fine when Adjust was not a child component but within the parent. Had to make it a child for better code readability

Answer 1

You don't manage values like an immutable variable, values is the same array between renders, you only update it's content.

You can find more information there Correct modification of state arrays in React.js