时间戳

首页 > 解决方案 > 在 React 中绑定数组内的值

reactjs - 在 React 中绑定数组内的值

问题描述

我有一个带有 size 属性的组件，该属性在数组中用于呈现选择列表。我发现当通过更高级别组件中的 setState() 更改大小时，这不会传播到 PizzaComponent。我可以说这是因为数组；map() 不再被调用。如果它只是一个模板值，它会起作用。

我发现使其工作的另一种方法是使 PizzaChoices 成为组件状态的一部分，然后覆盖数组。这需要大量重复的代码，而且看起来有点矫枉过正。

有没有办法在数组中传递动态引用或使状态值依赖于另一个状态值？

const PizzaComponent = (props) => {
    const {
        size
    } = props

    const pizzaChoices = [
      {
        value: 'cheese',
        label: 'Cheese',
        price: '10.00',
      },
      {
        value: 'pepperoni',
        label: 'Pepperoni',
        price: size,
      },
    ];

    return (
        {
          pizzaChoices.map((choice, i) => (
            <MyFancyComponent
              key={`pizza-${choice.value}`}
              label={choice.label}
              price={choice.price}
              value={choice.value}
              />
          ))
        }   
    )   
}

标签： reactjs

解决方案

我认为代码没有问题，PizzaComponent 更新了一些更改以适应 StackOverFlow/ 上的 React 15.5

function MyFancyComponent({label, price, value}) {
  return (
    <div>
      {label} - {price} - {value}
    </div>
  );
}

function PizzaComponent(props) {
    const {
        size
    } = props

    const pizzaChoices = [
      {
        value: 'cheese',
        label: 'Cheese',
        price: '10.00',
      },
      {
        value: 'pepperoni',
        label: 'Pepperoni',
        price: size,
      },
    ];

    return (
      <div>
        {pizzaChoices.map((choice, i) => (
            <MyFancyComponent
              key={`pizza-${choice.value}`}
              label={choice.label}
              price={choice.price}
              value={choice.value}
              />
          ))
        }   
      </div>
    )   
}

class App extends React.Component {
  componentWillMount() {
    this.state = {
      size: 5
    };
    
    this.changeSize = this.changeSize.bind(this);
  }
  changeSize() {
    const size = this.state.size + 5;
    this.setState({ size });
  }
  render() {
    return (
      <div>
        <button onClick={this.changeSize}>Change Size</button>
        <PizzaComponent size={this.state.size} />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

推荐阅读