Question

我正在使用redux，订阅ListView，显示控制台日志消息，但是在热重新加载之后屏幕才会更新。知道为什么ListView不会在屏幕上绘制新的Todo吗？

render() {
    var store = getStore();
    var todos = store.getState().todos;
    var dataSource = this.dataSource.cloneWithRows(todos);
    console.log("Rendering: ", jtodos);
    return (
        <View>
          <Text>Todos to do</Text>
          <ListView
            dataSource={dataSource}
            renderRow={this.renderTodo}
            style={styles.listView}/>
         </View>
    );
}

我还将代码更改为

renderTodo(todo) {
    console.log("Render:", todo);
    return (
        <View style={styles.container} key={todo.id}>
            <View style={styles.details}>
              <View style={styles.rightContainer}>
                <Text style={styles.title}>{todo.text}</Text>
              </View>
            </View>
        </View>
    );
}
render() {
    var store = getStore();
    var todos = store.getState().todos;
    console.log("Rendering: ", todos);
    var dataSource = this.dataSource.cloneWithRows(todos);
    return (
        <View>
          <Text>Todos to do</Text>
            {todos.map(this.renderTodo)}
        </View>
    );
}

控制台日志显示所有待办事项，包括在热重新加载之后才显示的新待办事项....

为什么屏幕不显示待办事项？

Rendering:  [Object, Object, Object, Object, Object, Object, Object]
Render: Object {text: "fghf", id: 1, completed: false}
Render: Object {text: "fghfbhhg", id: 2, completed: false}
Render: Object {text: "fghfbhhggfjg", id: 3, completed: false}
Render: Object {text: "fghfbhhggfjg", id: 4, completed: false}
Render: Object {text: "fghfbhhg", id: 5, completed: false}
Render: Object {text: "fghfbhhgkkkk", id: 6, completed: false}
Render: Object {text: "f", id: 7, completed: false}

在热重新加载之前，这些都不会显示在显示屏上。热重新加载后添加的任何内容都不会显示，直到下次热重新加载。

Answer 1

我用react-native开发了大约3-4个月，刚开始使用listview。我相信你必须实际设置状态，而不是将其分配给变量。

尝试下面的代码，因为我不能100％确定它是否可行。

render() {
    var store = getStore();
    var todos = store.getState().todos;
    // You need to actually set the state! 
    this.setState({
        dataSource: this.state.dataSource.cloneWithRows(todos),
    });
    console.log("Rendering: ", jtodos);
    return (
        <View>
          <Text>Todos to do</Text>
          <ListView
            dataSource={this.state.dataSource}
            renderRow={this.renderTodo}
            style={styles.listView}/>
         </View>
    );
}

修改

设置componentWillReceiveProps中的状态或相应的反应生命周期方法

ListView仅在热重新加载后呈现

1 个答案: