状态正在更新，但组件没有将 props 中的更新状态发送到 Reactjs 中的子组件

Question

我创建了 4 个组件，SalesBanner 是 ProductImagePanel 的父级。ProductImagePanel 是 ProductCarouselProgressbar 的父级。 ProductCarouselProgressbar 是 ProgressBar 的父级。

原来如此

     SalesBanner
          |
          v
  ProductImagePanel
          |
          v
ProductCarouselProgressBar
          |
          v
     ProgressBar

我在SalesBanner 组件中声明，它作为道具传递给它的所有子组件。此外，我还在SalesBanner 中定义了一个函数，它正在更新状态，然后将更新后的状态发送回其子组件，因为它们在调用setState() 时被重新渲染。

问题是，SalesBanner 中的状态正在更新，但它们没有向下传递（更新）到其子组件。

代码如下：

class SaleBanner extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            numberOfProductsOnSale: 4,
            productCategories: [  ...  ],
            productNames: [  ...  ],
            productPrice: {
                oldPrice: [  ...  ],
                salePrice: [  ...  ]
            },
            productImage: [  ...  ],
            currentlyRenderedProductId: 1  //This is what i want to update
        }

        this.updateCurrentProductRenderedId = this.updateCurrentProductRenderedId.bind(this);
    }

    //This function will update the state, and I want to pass its reference down to the child components
    updateCurrentProductRenderedId(newId) {
        this.setState(() => ({
            currentlyRenderedProductId: newId
        }))
    }

    render() {
        return(
            <SalesBanner>
                <ProductDetails category={this.state.productCategories[this.state.currentlyRenderedProductId]} prodName={this.state.productNames[this.state.currentlyRenderedProductId]} prodOldPrice={this.state.productPrice.oldPrice[this.state.currentlyRenderedProductId]} prodSalePrice={this.state.productPrice.salePrice[this.state.currentlyRenderedProductId]} />
                <ProductImagePanel updateState={this.updateCurrentProductRenderedId} numberOfProducts={this.state.numberOfProductsOnSale} currProductId={this.state.currentlyRenderedProductId} prodImage={this.state.productImage[this.state.currentlyRenderedProductId]}/>
                <ProductCarouselController />
            </SalesBanner>
        );
    }
}

ProductImagePanel组件代码：

class ProductImagePanel extends Component {
    constructor(props) {
        super(props);

        this.state = {
            numberOfProductsOnSale: props.numberOfProducts,
            currentlyRenderedProductId: props.currProductId,
            productImage: props.prodImage
        };
    }

    render() {
        return (
            <SaleProductImage>
                <ProductImageRendering />
                <ProductCarouselProgressbar updateState={this.props.updateState} numberOfProducts={this.state.numberOfProductsOnSale} currProductId={this.state.currentlyRenderedProductId} prodImage={this.state.productImage}/>
            </SaleProductImage>
        )
    }
}

ProductCarouselProgressBar组件代码：

class ProductCarouselProgressbar extends Component {
    constructor(props) {
        super(props);

        this.state = {
            numberOfProductsInSale: props.numberOfProducts,
            currentProductId: props.currProductId,
            productImage: props.prodImage
        };
    }

    render() {
        return (
            <ProductIdAndProgressPanel>
        
                <CurrentId> { this.state.currentProductId < 9 ? '0' + this.state.currentProductId : this.state.currentProductId } </CurrentId>
                <ProgressBar currentProdId={this.state.currentProductId} updateState={this.props.updateState} />
                <TotalId> { this.state.numberOfProductsInSale < 9 ? '0' + this.state.numberOfProductsInSale : this.state.numberOfProductsInSale } </TotalId>
        
            </ProductIdAndProgressPanel>
        )
    }
}

ProgressBar组件代码：

class ProgressBar extends Component {
    constructor(props) {
        super(props);
        this.progressBar = React.createRef();
    }

    componentDidMount() {
        setInterval(() => {
            this.progressBar.current.style['width'] = (this.progressBar.current.offsetWidth + 1) + 'px';

            if(this.progressBar.current.offsetWidth > this.progressBar.current.parentNode.offsetWidth) {
                this.progressBar.current.style['width'] = 0;
                this.props.updateState(((this.props.currentProdId % 4 )) + 1);    //This is where I want to update state of the SalesBanner Component
            }
        }, 20);
    }

    render() {
        return(
            <OuterProgressBar>
                <InnerProgressBar ref={this.progressBar}/>
            </OuterProgressBar>
        );
    }
}

我没有解释的任何其他 JSX 语法要么是 React 组件，要么是 styled-components 标签。

Answer 1

当您将道具传递给您的子组件时，它不会直观地为您重新更新子组件的状态。如果你想这样做，你需要使用componentDidUpdate()

class ProductImagePanel extends Component {
constructor(props) {
    super(props);

    this.state = {
        numberOfProductsOnSale: props.numberOfProducts,
        currentlyRenderedProductId: props.currProductId,
        productImage: props.prodImage
    };
}

componentDidUpdate(prevProps){
   if(prevProps.currProductId !== this.props.currProductId){
       this.setState({
            numberOfProductsInSale: this.props.numberOfProducts,
            currentlyRenderedProductId: this.props.currProductId,
            productImage: this.props.prodImage
       })
   }
}

render() {
    return (
        <SaleProductImage>
            <ProductImageRendering />
            <ProductCarouselProgressbar updateState={this.props.updateState} numberOfProducts={this.state.numberOfProductsOnSale} currProductId={this.state.currentlyRenderedProductId} prodImage={this.state.productImage}/>
        </SaleProductImage>
    )
}

}

Answer 2

该值没有更新，因为您将 props 值保存在每个组件的 state 中，删除子组件内的 state 并直接从 props 访问值。

产品图像面板

class ProductImagePanel extends Component {

  render() {
    return (
      <SaleProductImage>
        <ProductImageRendering />
        <ProductCarouselProgressbar
          updateState={this.props.updateState}
          numberOfProducts={this.props.numberOfProducts}
          currProductId={this.props.currProductId}
          prodImage={this.props.productImage}
        />
      </SaleProductImage>
    );
  }
}

ProductCarouselProgressbar

class ProductCarouselProgressbar extends Component {
  render() {
    return (
      <ProductIdAndProgressPanel>
        <CurrentId>
          {' '}
          {this.props.currProductId < 9
            ? '0' + this.props.currProductId
            : this.props.currProductId}{' '}
        </CurrentId>
        <ProgressBar
          currentProdId={this.props.currProductId}
          updateState={this.props.updateState}
        />
        <TotalId>
          {' '}
          {this.props.numberOfProducts < 9
            ? '0' + this.props.numberOfProducts
            : this.props.numberOfProducts}{' '}
        </TotalId>
      </ProductIdAndProgressPanel>
    );
  }
}

进度条

class ProgressBar extends Component {
  constructor(props) {
    super(props);
    this.progressBar = React.createRef();
  }

  componentDidMount() {
    setInterval(() => {
      this.progressBar.current.style['width'] =
        this.progressBar.current.offsetWidth + 1 + 'px';

      if (
        this.progressBar.current.offsetWidth >
        this.progressBar.current.parentNode.offsetWidth
      ) {
        this.progressBar.current.style['width'] = 0;
        this.props.updateState((this.props.currProductId % 4) + 1); //This is where I want to update state of the SalesBanner Component
      }
    }, 20);
  }

  render() {
    return (
      <OuterProgressBar>
        <InnerProgressBar ref={this.progressBar} />
      </OuterProgressBar>
    );
  }
}

Demo