React-native with native-base：不反映数据变化

Question

我获得列表视图并呈现数据。但是当我 click/touch 复选框时，它不会切换选择。它只是保持与开始时相同的状态。

提前致谢。

export default class FlatListBasics extends Component {

constructor() {
    super();
    this.state = {
        data: [
            {key: 'Devin', done: true},
            {key: 'Jackson', done: true},
            {key: 'James', done: true},
            {key: 'Joel', done: true},
            {key: 'John', done: true},
            {key: 'Jillian', done: false},
            {key: 'Jimmy', done: true},
            {key: 'Julie', done: true}
        ]
    }
}

_renderRow(rowData) {
    return <ListItem>
        <CheckBox checked={rowData.item.done} onPress={
            () => {
                rowData.item.done = !rowData.item.done;
                return rowData;
            }
        }/>
        <Text>  {rowData.item.key}</Text>
    </ListItem>
}

render() {
    return (
        <FlatList
            data={this.state.data}
            renderItem={this._renderRow}
            extraData={this.state}
        />
    );
}

}

Answer 1

更改 Flatlist renderItem 道具

renderItem={({index, item}) => this._renderRow(index, item)}

改变_renderRow方法

_renderRow = (index, rowData) => {
     return <ListItem>
         <CheckBox checked={rowData.item.done} 
                   onPress={()=>{
                         this.setState((prevState, props) => ({ 
                         data[index].done = !prevState.data[index].done 
                         }));
                   }}
             />
         <Text>  {rowData.item.key}</Text>
       </ListItem>
}

您必须更改列表项的状态才能更新列表。

Answer 2

我建议你为每个需要在FlatList上渲染的项目创建一个组件，并用shouldComponentUpdate控制变化状态：

class CustomListItem extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            checked: props.checked
        }
    }

    shouldComponentUpdate(nextProps, nextState) {
        return this.state.checked !== nextState.checked 
    }

    render() { 
        const { text } = this.props
        const { checked } = this.state
        return (
        <ListItem>
          <CheckBox checked={checked} 
           onPress={()=> {
              this.setState({ checked: !checked })
           }}
           />
           <Text>{text}</Text>
        </ListItem>
        )
    }
}

所以改变 _renderRow 来使用它，像这样：

_renderRow(rowData) {
    const { done, key } = rowData.item
    return (
       <CustomListItem 
        text={done}
         checked={key}
       />
    )
}

React-native with native-base：不反映数据变化

React-native with native-base: data change is not reflected

react-native

native-base