如何使用 setState 更改输入值

Question

我正在构建一个简单的待办事项应用程序，我需要更改输入值（以编辑任务）。 我试图让它像在 react native docs 中一样：

export default function UselessTextInput() {
  const [value, onChangeText] = React.useState('Useless Placeholder');

  return (
    <TextInput
      style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
      onChangeText={text => onChangeText(text)}
      value={value}
    />
  );
}

但是在我的代码中，我在 map 函数中有我的输入，它显示一个错误：“undefined 不是一个函数（靠近 '...todos.tasks.map...'）

任何人都可以解释我为什么会收到此错误以及如何解决它？

我的代码：

const App = () => {

const[todos,setTodos] = useState({
  tasks: [],
  task: '',
  key: ''
})

const addItem = () => {

  if(todos.task != '' && todos.task != null){
    setTodos({
      tasks: todos.tasks.concat(todos.task),
      task: ''
    })
    console.log(todos.tasks)
  }
  else {
    Alert.alert('OOPS!', 'You need to fill in input' , [{
      text: 'Understood'
    }])
  }
}

const removeItem = arg => {
  const list = todos.tasks;
        list.splice(arg,1)
        setTodos({tasks: list})
}


const handleInputTextChange = (newText) => {
  setTodos({
    tasks: newText
  })
}

  return (

   <ScrollView keyboardShouldPersistTaps='handled'>
    <View style={styles.container}>

    <View style = {styles.header}>
      <Text style = {styles.title}>Todos</Text>
    </View>

        <View style={styles.content}>
           <TextInput
           style = {styles.input}
           placeholder = "Type new item"
           value = {todos.task}
           onChangeText = {e => setTodos({...todos, task: e, key: Date.now()})}
           />
           <ButtonSubmit text = 'Submit' onPress = {addItem}/>

           {
             todos.tasks.map((item, index) => {
               return(

            <TouchableOpacity>
              <View style = {styles.Wrapper} key = {todos.key}>
                <View style = {styles.taskWrapper}>
                  <TextInput style = {styles.task} id = {todos.key} value = {item} onChangeText={handleInputTextChange} />
                </View>
                <ButtonRemove  onPress = {() => removeItem(index)} />
              </View>
            </TouchableOpacity>
               )
             })
           }
        </View>
    </View>
  </ScrollView>
  );
}

Answer 1

您正在使用输入值覆盖您的tasks数组，然后在尝试映射不再是字符串而不是数组的tasks时出现错误。

尝试这个：

const App = () => {

  const[todos,setTodos] = useState({
    tasks: [],
    task: '',
    key: ''
  })

  const addItem = () => {

    if(todos.task != '' && todos.task != null){
      setTodos({
        tasks: todos.tasks.concat(todos.task),
        task: ''
      })
      console.log(todos.tasks)
    }
    else {
      Alert.alert('OOPS!', 'You need to fill in input' , [{
        text: 'Understood'
      }])
    }
  }

  const removeItem = arg => {
    const list = todos.tasks;
          list.splice(arg,1)
          setTodos({tasks: list})
  }


  const handleInputTextChange = (newText, index) => {
    setTodos((s) => {
      ...s,
      tasks: s.tasks.map((t, i) => i === index ? newText : t)
    })
  }

  return (

   <ScrollView keyboardShouldPersistTaps='handled'>
    <View style={styles.container}>

    <View style = {styles.header}>
      <Text style = {styles.title}>Todos</Text>
    </View>

        <View style={styles.content}>
           <TextInput
           style = {styles.input}
           placeholder = "Type new item"
           value = {todos.task}
           onChangeText = {e => setTodos({...todos, task: e, key: Date.now()})}
           />
           <ButtonSubmit text = 'Submit' onPress = {addItem}/>

           {
             todos.tasks.map((item, index) => {
               return(
                <TouchableOpacity>
                  <View style = {styles.Wrapper} key = {todos.key}>
                    <View style = {styles.taskWrapper}>
                      <TextInput style = {styles.task} id = {todos.key} value = {item} onChangeText={value => handleInputTextChange(value, index)} />
                    </View>
                    <ButtonRemove  onPress = {() => removeItem(index)} />
                  </View>
                </TouchableOpacity>
               )
             })
           }
        </View>
    </View>
  </ScrollView>
  );
}

此外，请检查您的代码以使用key prop，因为它似乎有问题。 你永远不应该使用Date.now()作为键。 检查 React 文档： https : //reactjs.org/docs/lists-and-keys.html