在已随 onPress 更改的循环反应本机代码内显示值

Question

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

苏打水 ..................... - 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() 也会导致它重新渲染。

Whosebug 上的以下问题很有帮助。

在已随 onPress 更改的循环反应本机代码内显示值

display value inside of looped react native code that has changed with onPress

reactjs

react-native

react-native-ios