hook组件的props数组成员无法正常更新渲染



  • 最简化demo:
    https://github.com/zicjin/taro-test
    使用标准项目新建流程。typescript,无css预处理。

    export default function Shelves(props) {
      const { specs = [] } = props
    
      // const specs = [{
      //   'id': 482,
      //   'detail': [],
      //   'price': 30,
      //   'platformPrice': 10,
      //   'profit': 20,
      //   'marketPrice': 25,
      //   'stock': 480,
      //   'commissionRate': null
      // }]
    
      const [profits, setProfits] = useState(specs.map(s => ({
        specId: s.id,
        profit: 0
      })))
    
      const setProfit = (e, i) => {
        profits[i].profit = +e.detail.value
        setProfits([...profits])
      }
    
      return (
        <View className='shelves' style={{ marginBottom: '100px' }}>
          {specs.map((s, i) => <View key={i}>
            <Input
              type='number'
              value={profits[i].profit}
              onInput={e => { setProfit(e, i) }}
            />
    
            {/* confuse: 无法移除 toString() */}
            <View style={{ marginTop: '20px' }}>{profits[i].profit}</View>
            <View>{profits[i].profit.toString()}</View>
    
          </View>)}
        </View>
      )
    }
    

    当我更改input值,“profits[i].profit”无法正常更新。以下情况可正常更新:

    1. 加上toString()即可正常。
    2. 使用组件内部变量代替 props.specs 即可正常
    3. props.specs 更换为object,修改useState(specs.map... 即可正常
    4. 纯react应用也没有问题:https://codesandbox.io/s/jolly-wescoff-1y633?fontsize=14&hidenavigation=1

登录后回复