Question

尝试将非空数组设置为组件状态属性时（在初始化时，在组件构造函数中），例如：

this.state = { results: ['apple','orange'] } //in the component constructor

在控制台中返回此错误：

在这种环境中，赋值的来源必须是一个对象。这个错误是性能优化而不符合规范

如果数组是空的，那可行（但是一旦你尝试重新设置非空数组，它就会出错）

这样可行：

this.state = { results: [] }  //in the component constructor

直到你

this.setState({results: ['apple','orange'] }) //in a component function

此时将返回上一个错误...

我不明白。是不是javascript数组也应该是类型对象，因此可以用作状态属性值？

我在Android设备上使用最新的react-native版本（0.45.1）进行了测试。

state.results对象仅用于这样的列表视图：

   const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 })

  render () {
    return (

    <ListView 
              style={{position: 'absolute', width: 100, backgroundColor: 'white', zIndex: 3}}
              keyboardShouldPersistTaps='always'
              initialListSize={15}
              enableEmptySections={true}
              dataSource={ds.cloneWithRows(this.state.results)}
              renderRow={(rowData, sectionId, rowId, highlightRow) =>
                <RowWrapper styles={styles.rowWrapper} >
                  <TouchableOpacity
                    activeOpacity={0.5}
                    onPress={() => {this.onItemPress(this.state.results[rowId])}}
                  >
                    <Text style={styles.rowText}>{rowData}</Text>
                  </TouchableOpacity>
                </RowWrapper>
              }
            />
   )
  }

    class RowWrapper extends Component {
      constructor (props) {
        super(props)
        this.defaultTransitionDuration = 500
        this.state = {
          opacity: new Animated.Value(0)
        }
      }
      componentDidMount () {
        Animated.timing(this.state.opacity, {
          toValue: 1,
          duration: this.defaultTransitionDuration
        }).start()
      }
      render () {
        return (
          <TouchableWithoutFeedback>
            <Animated.View style={{...this.props.styles, opacity: this.state.opacity }}>
              {this.props.children}
            </Animated.View>
          </TouchableWithoutFeedback>
        )
      }
    }

Answer 1

你不应该改变状态。而不是做

this.setState({results: ['apple','orange'] })

你应该这样做

var resultsArr = this.state.results.slice();
var newResults = ['apple','orange'];
resultsArr.concat(newResults); or resultsArr.push(newResults);
this.setState({results: resultsArr })

将数组指定为反应组件状态属性？

1 个答案: