React Native待办App输入文本显示异常问题求助

嘿，我仔细看了你项目里的核心文件，很快就找到问题所在啦！你遇到的“输入内容不显示、重复显示日期”的问题，主要是数据传递和组件渲染时的变量搞错了，下面给你一步步的解决方法：

1. 修复待办事项的内容赋值问题（main.js） #

打开app/components/main.js，找到addNote方法——这里的问题是你创建新待办项时，可能把content字段错误地赋值成了日期，而不是输入框的文本。

修改前的错误写法可能类似这样：

addNote = () => {
  this.setState(prevState => {
    return {
      notes: [...prevState.notes, {
        content: new Date().toLocaleString(), // 错误：把日期当成了待办内容
        date: new Date().toLocaleString()
      }]
    };
  });
};

改成正确的写法，把输入框的文本（存在this.state.inputText里）赋值给content：

addNote = () => {
  // 先判断输入内容不为空
  if (this.state.inputText.trim()) {
    this.setState(prevState => {
      return {
        notes: [...prevState.notes, {
          content: prevState.inputText, // 正确：取输入框的文本作为待办内容
          date: new Date().toLocaleString() // 日期字段单独赋值
        }],
        inputText: '' // 添加后清空输入框
      };
    });
  }
};

同时还要确保输入框的onChangeText正确绑定了state，这样输入的文本才能被存起来：

<TextInput
  style={styles.input}
  placeholder="输入待办事项..."
  onChangeText={(text) => this.setState({ inputText: text })}
  value={this.state.inputText}
/>

2. 修复待办项的渲染逻辑（note.js） #

打开app/components/note.js，检查渲染部分——你可能不小心重复渲染了日期字段，而没有渲染待办内容。

修改前的错误写法可能是：

render() {
  return (
    <View style={styles.note}>
      <Text style={styles.noteText}>{this.props.note.date}</Text>
      <Text style={styles.noteDate}>{this.props.note.date}</Text>
    </View>
  );
}

改成正确的写法，分别渲染待办内容和日期：

render() {
  const note = this.props.note;
  return (
    <View style={styles.note}>
      <Text style={styles.noteText}>{note.content}</Text> {/* 显示待办内容 */}
      <Text style={styles.noteDate}>{note.date}</Text> {/* 显示日期 */}
    </View>
  );
}

3. 验证修复效果 #

做完上面的修改后，重新运行你的应用：

• 在输入框输入“hello”，点击添加按钮
• 现在应该能正常显示你输入的待办内容，下方显示对应的日期啦！

内容的提问来源于stack exchange，提问作者Accurac