Question

我要做的是重复一个订单项，用户将能够更改该行上每个项目的数量。例如

Soda ............ - 1 +
面包棒.. - 0 +
等...... ............. - 3 +

到目前为止，我已经能够更改值并记录发生的更改，但显示的值不会更改。

下面是我到目前为止的内容

render() {

    let pizzaSides = this.props.pizzaSidesArray.map((sidesObj) => {

      sidesObj.count = 0;

递减函数以减少项目的数量但不低于0.

        decrement = () =>{
          console.log('dec');
          console.log(sidesObj);
          if (sidesObj.count > 0) {
            sidesObj.count--;
          }
        }

调用后增加

        increment = () =>{
          console.log('inc');
          console.log(sidesObj);
          sidesObj.count++;
        }

        return (
          <View 
             key={sidesObj.name} 
             style={{
                  paddingTop: 10, 
                  flex: 1, 
                  flexDirection: 'row', 
                  alignItems: 'center',
                  justifyContent: 'space-between'}}>

            <View style={{flex:1.5,flexDirection: 'row'}}>
              <TouchableHighlight
                onPress={ decrement}
                style={{flex:1}}>
                <Text> - </Text>
              </TouchableHighlight>

虽然可触摸的高光记录了更改，但下面的文字不会改变

              <Text style={{flex:1}}>
                {sidesObj.count}
              </Text>

              <TouchableHighlight
                onPress={ increment}
                style={{flex:1}}>
                <Text> + </Text>
              </TouchableHighlight>
            </View>

          </View>
        );
    });

    return (
        <View>

          {pizzaSides}
        </View>

    )
}

}

感谢您的帮助。：D

Answer 1

您需要将您的价值存储在州内。看看React documentation

Answer 2

除了@Antone Grandchamp所说的话。

在您的组件中，您可以调用this.forceUpdate（）来强制重新呈现。

文档：https://facebook.github.io/react/docs/component-api.html

如果我没有使用Redux，但是使用默认状态处理，那么调用this.setState（）也会导致它重新渲染。

关于StackOverflow的以下问题很有帮助。

Can you force a React component to rerender without calling setState?

循环内部的显示值反应已使用onPress更改的本机代码

2 个答案: