正确更新reactjs中的状态数组

问题描述

我试图用React Native构建一个Todo应用

const [ enteredGoal,setEnteredGoal ] = useState("");
const [ courseGoals,setCourseGoals ] = useState([]);

const goalInputHandler = (enteredText) => {
  setEnteredGoal(enteredText);
};


const addGoalHandler = () => {
  let arrGoals = courseGoals;
  arrGoals.push(enteredGoal);
  setCourseGoals(arrGoals);
};

return (
    <View style={styles.screen}>
      <View style={styles.inputContainer}>
        <TextInput style={styles.input} onChangeText={goalInputHandler}/>
        <Button title="ADD" onPress={addGoalHandler}/>
      </View>
      <View>
        { 
          courseGoals.map((goal) => {
            <View key={goal} style={styles.listItem}><Text>{goal}</Text></View>
          })
        }
      </View>
    </View>
  );

这个想法是列出setCourseGoals数组，但是显然在分配了新文本之后，它没有列出任何内容。直到文本更改后，列表才重新呈现。知道为什么会这样吗？ “ useState”函数是异步的，它在渲染后分配值？预先感谢。

解决方法

问题来自addGoalHandler

const addGoalHandler = () => {
  let arrGoals = courseGoals;
  arrGoals.push(enteredGoal);
  setCourseGoals(arrGoals);
};

发生了什么事，您正在使用push方法将其推入已更改状态的courseGoals，您可以执行的选择之一是更新为以下状态

const addGoalHandler = () => {
  let arrGoals = [...courseGoals,enteredGoal];
  setCourseGoals(arrGoals);
};

这个想法是，使用传播语法，您可以创建一个数组的新副本，而不是突变先前的状态，当然，可以将其缩短为单行，如下所示：

const addGoalHandler = () => setCourseGoals([...courseGoals,enteredGoal])

react-native reactjs reactjs