reactjs - ScrollView 在 react-native 中渲染没有数据的更新组件？

Question

我在 react-native 应用程序的ScrollView中有我的页面。在第一次加载子组件时，可以说多次TextInput's渲染非常好。

每个TextInput都有一个唯一的键。当我开始更新任何 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 }}添加到每个子组件并修复它。

为了限制 ScrollView 的高度，要么直接设置视图的高度（不鼓励），要么确保所有父视图都有限制的高度。忘记将 {flex: 1} 向下传输视图堆栈可能会导致此处出现错误，元素检查器使调试变得容易。