Question

我正在开发一个用于数据操作的简单React应用，并且我对框架还很陌生，所以我知道我肯定做错了明显的事情。我有一个要输出到屏幕并在数据更改时更新的字符串列表。但是，该列表似乎未呈现。我找不到任何不使用<ul>或<li>的在线资源，而且这些元素都无法在我的App返回中使用。

在过去2个小时中，我尝试了十多种方法来呈现此列表，但没有任何效果。有什么想法吗？

（我也希望获得任何更简洁的代码之类的技巧。这是一个快速整合的原型，但是到目前为止，我很喜欢学习React Native，所以我希望有任何技巧可以改善我的工作。）< / p>

export default function App() {
      const [locationName, setLocationName] = React.useState("Location Name");
      const [id, setId] = React.useState("12345");
      const [isGallons, setIsGallons] = useState(false);
      const toggleSwitch = () => setIsGallons((previousState) => !previousState);
      const [meterReadings, setReadings] = useState([1234, 2345, 3456]);
      const [meterReadingList, setList] = useState(meterReadings);
      const [meterReadingInput, setReadingInput] = useState("");
    
      return (
        <SafeAreaView style={styles.container}>
          <Image source={require("./assets/icon.png")}></Image>
          <Text>Enter Location: </Text>
          <TextInput
            style={styles.input}
            placeholder="Location Name"
            onChangeText={(text) => setLocationName(text)}
          />
          <Text>Enter Id: </Text>
          <TextInput
            style={styles.input}
            placeholder="Id"
            onChangeText={(text) => setId(text)}
          />
          <Text>Is Gallons</Text>
          <Switch
            trackColor={{ false: "#767577", true: "#81b0ff" }}
            thumbColor={isGallons ? "#f5dd4b" : "#f4f3f4"}
            ios_backgroundColor="#3e3e3e"
            onValueChange={toggleSwitch}
            value={isGallons}
          />
          <Text>Enter New Reading: </Text>
          <TextInput
            style={styles.input}
            placeholder="Reading"
            onChangeText={(text) => setReadingInput(text)}
          />
          <FlatList>
            data={meterReadingList}
            renderItem={({ reading }) => <Text>{reading}</Text>}
          </FlatList>
          <Button
            onPress={() => {
              meterReadings.push(meterReadingInput);
              setList(meterReadings);
            }}
            title="Submit"
            color="#841584"
          />
          <StatusBar style="auto" />
        </SafeAreaView>
      );
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        backgroundColor: "#fff",
        alignItems: "center",
        justifyContent: "center",
      },
      input: {
        borderWidth: 1,
        borderColor: "#777",
        padding: 8,
        margin: 10,
        width: 200,
      },
    });

Answer 1

您使用FlatList时遇到JSX语法问题。尝试以下方法：

<FlatList
  data={meterReadingList}
  renderItem={({ reading }) => <Text>{reading}</Text>}
/>

Answer 2

如前所述，您遇到语法问题，但不仅如此。试试这个：

<FlatList
  data={meterReadingList}
  renderItem={({ item }) => <Text>{item}</Text>}
/>

renderItem属性应该始终为item，因为它是对象的一部分。您可以在此处查看文档：{{3}}

Answer 3

请参阅官方文档。 https://reactnative.dev/docs/flatlist 单个组件的“ Flatlist”中只能有一次。尝试这样。

     <FlatList
        data={meterReadingList}
        renderItem={({ reading }) => <Text>{reading}</Text>}
      />

FlatList组件未呈现或更新

3 个答案: