Question

const products = [
    {
      id: 1,
      ...
    },
    {
      id: 2,
      ...
    },
    {
      id: 3,
      ...
    },
];

我创建了ProductList组件，其中包含3个Product组件：

    class ProductList extends Component {

      constructor(props) {
       super(props)
      }

      render() {
        const productComponents = products.map((product) => (
           <Product 
                key = {'product-' + product.id}
                id = {product.id}
                ...
            />
        ));
        return ( 
              <ul className="holder-list row">
                {productComponents}
              </ul> 
        );
       }
     }

     class Product extends Component {
       constructor(props) {
       super(props)
      }
       render() {
         return(..)
       }
     }

如何以及在构造函数中的哪个组件中为所有三个产品设置不同的初始状态？

我要为每个产品设置this.state的初始值。

示例：

对于ID为1的产品-this.state={color: blue}，

对于ID为2的产品-this.state={color: yellow}，

ID为3的产品-this.state={color: red}。

我该怎么做？

Answer 1

这是您可以为color设置状态Product的方法。两者都是从一篇很棒的文章You Probably Don't Need Derived State中得到启发的，该文章提供了一些有关如何处理“派生状态”的出色示例。</ p>

ProductList-创建一个方法，该方法根据您的ID对颜色的要求返回字符串颜色值。这可以在类定义之外，它不需要/不需要是类ProductList上的方法，因为它不需要this或类似的方法。添加一个额外的道具，例如defaultColor，该道具将传递给Product的每个实例：

const getColor = id => {
  switch (id) {
    case 1:
      return 'blue';
    case 2:
      return 'yellow';
    case 3:
      return 'red'
    default:
      return '';
  }
};

// ...

render() {
  const productComponents = products.map((product) => (
    <Product 
      key = {'product-' + product.id}
      id = {product.id}
      defaultColor={getColor(product.id)}
      ...
    />
  ));
}

产品-使用传入的defaultColor道具设置初始状态。使用不同的属性将允许每个Product组件完全控制自己的颜色状态值/通过类似{{1 }}，但复制原始颜色值：

<input />

这是StackBlitz，演示了实际的功能。

其他选项正在使用class Product extends Component { state = { color: this.props.defaultColor }; // ... render() { return ({/* ... */}); } }中的static getDerivedStateFromProps()。它有条件地检查Product道具是否已更改，以避免不必要地设置状态并覆盖id局部状态值。我们一直在跟踪先前的Product值，以便可以在条件语句中使用它来查看是否确实发生了任何更改：

id

这里是StackBlitz，演示了此功能。

很难说出确切的处理方法，因为您可能不需要class Product extends Component { constructor(props) { super(props); this.state = { prevId: -1, color: '' }; } static getDerivedStateFromProps(props, state) { if (props.id !== state.prevId) { switch (props.id) { case 1: return { color: 'blue', prevId: props.id }; case 2: return { color: 'yellow', prevId: props.id }; case 3: return { color: 'red', prevId: props.id }; default: return null; } } return null } render() { return ({/* ... */}); } }中的状态。 Product可以充当“哑巴”组件，仅接收道具并向Product这样的高阶组件发出价值更改。

希望有帮助！

如何在React中初始化组件数组中每个项目组件的状态？

1 个答案: