时间戳

首页 > 解决方案 > reactjs中状态数组的正确更新

reactjs - 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”函数是异步的，渲染后赋值？提前致谢。

标签： reactjsreact-native

解决方案

问题来自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])

推荐阅读