ScrollView渲染更新的组件，而没有反应本质中的数据

Question

我在React-Native App中的A scrollview 中都有我的页面。首先加载孩子组件时，可以说多个TextInput's使得很好。

每个 textInput 具有一个唯一的键。当我开始更新任何文本输入字段时，其他组件就会崩溃。通过崩溃，我的意思是存在组件，但不会显示任何数据。OnPress事件可用于塌陷的组件，但文本未显示。

我发现的一种方法是在每个渲染上添加唯一的随机key，但是 textInput 的焦点丢失了，这不是一个好的用户体验。

代码：

class App extends React.Component {
  constructor(props) {
   super(props);
   this.state= this.props;
  }
  buildList(data) {
    _.map(data, blog => {
      return(
      <View key={blog.id}>
        <Text>{blog.title}</Text>
        <TextInput
         placeholder={blog.label}
         onChangeText={text => onChangeText(text)}
         value={value}
        />
      </View>
     );
    }
  }
  render() {
    const {
          data
        } = this.state;
    return (
      <View style={mainStyles.pageWrap}>
        <ScrollView style={mainStyles.contentWrap}>
          <View>
            {
              this.buildList(
                data
              )
            }
          </View>
        </ScrollView>
      </View>
    );
  }
}

Answer 1

通过文档并添加 style = {{flex：1}} 将其修复。

为了绑定卷轴的高度，要么设置高度 直接的视图（灰心）或确保所有父观点都有 有限的高度。忘记转移{flex：1}沿视图堆栈 可能会导致此处的错误，元素检查员很容易 调试。