文本字符串必须在文本组件中呈现

Question

我遇到了这个错误，我阅读了一些修复它的方法，但没有任何效果

<View style={styles.container}>
        <StatusBar
          backgroundColor="transparent"
          translucent
          barStyle={theme.dark ? 'light-content' : 'light-content'}
        />
        {open ? (
          <DateTimePicker
            style={{width: '100%', margin: 5}}
            mode="date"
            value={date}
            dateFormat="day month year"
            display="calendar"
            onChange={handleDate}
          />
        ) : (
          <Button
            style={{margin: 5}}
            color="#17E5C2"
            onPress={() => {
              setOpen(true);
            }}>
            Filtrar por data
          </Button>
        )}
        {Object.values(JSON.parse(route.params.paramKey).message).map(item =>
          Object.values(item.createdAt[0]).filter(actualDate =>
            actualDate.includes(dateFilter) ? (
              <Card mode="outlined" key={uuidv4()}>
                <Title>{item?.createdAt[0].value}</Title>
                <Button
                  style={{alignItems: 'flex-start'}}
                  color="#17E5C2"
                  icon={
                    infoVisible
                      ? 'arrow-up-bold-outline'
                      : 'arrow-down-bold-outline'
                  }
                  mode="outlined"
                  onPress={() => {
                    handleInfo();
                  }}>
                  Ver detalhes
                </Button>
                {Object.keys(item).map(data => (
                  <Card.Content
                    key={uuidv4()}
                    style={infoVisible ? {display: 'flex'} : {display: 'none'}}
                    accessible={false}>
                    <Paragraph style={{fontWeight: 'bold'}}>{data}</Paragraph> // {data} is a string as I checked in console.log
                    <Paragraph>{item[data][0]?.value}</Paragraph>
                  </Card.Content>
                ))}
                <Card.Actions>
                  <Button color={'#17E5C2'}>Edit</Button>
                </Card.Actions>
              </Card>
            ) : (
              console.log('NO ACTUAL DATA')  // When I change console.log to a react child like(<Text>test</Text>) the error appear's instantly
            ),
          ),
        )}
      </View>

当我选择一个有数据的日期时出现错误。我试着把 console.log besids react child 放在一起，当我把它放在数据时。所以我认为错误可能出在我的反应中 childs.

我尝试修复我的 jsx 条件，但没有成功，还尝试删除一些逗号，但也没有成功，我尝试在顶部和末尾使用 <> </>，但也没有用

完整的错误信息：Error: Text strings must be rendered within a <Text> component.

我试了一整天所以....这很困难，我想要一些关于如何修复它的提示。

Answer 1

如果您没有在组件中包装字符串，或者如果您使用某些代码格式化程序，它有时会在组件外部添加 {" "}，则会出现此错误。检查组件中的这些情况（P.s：- 逐个组件注释掉代码可能会节省您一些时间）

Answer 2

我从你的代码中看出一个可能的问题

Object.values(item.createdAt[0]).filter(actualDate => actualDate.includes(dateFilter) ? <YourComponent> : console.log('NO ACTUAL DATA'))

您使用 filter 而不是 map 作为三元条件。

filter returns true/false 值，所以你不应该在这种情况下使用它

如果你想使用它，合适的可以是

Object.values(item.createdAt[0]).filter(actualDate => actualDate.includes(dateFilter))

文本字符串必须在文本组件中呈现

text string must be rendered within a text component

javascript

jsx

react-native