更新对象属性 Typescript React-Native答案

【问题标题】：Updating an object attribute Typescript React-Native更新对象属性 Typescript React-Native
【发布时间】：2022-01-10 20:05:34
【问题描述】：

我正在尝试更新属性。我是 typecipt 的新手（以及 react/react-native/javascript 等），所以请耐心等待。这是尝试重新创建我的问题的尝试：

export default function App() {
  const [schedule, setSchedule] = useState({
    id: 12409,
    name: 'Schedule1',
    start: 9,
    end: 10
  })
  const [startHour, setStartHour] = useState({
    start: 7
  })
  const [endHour, setEndHour] = useState({
    end: 11
  })
  const [scheduleFinal, setFinal] = useState(schedule)
  submitPress(() => {
      setFinal([...schedule], start, start: startHour.start)
    };
    return ( <
      View >
      <
      Button title = "Change Start and End"
      onPress = {
        submitPress
      }
      /> <
      Text > New start: {
        scheduleFinal.start
      }
      New End: {
        scheduleFinal.end
      } < /Text> <
      /View>
    );
  }

我正在尝试替换属性：

开始结束

在具有 startHour 和 endHour 状态的属性的调度对象中。我尝试了各种无效的逻辑组合。我不确定我在这里的方法是否会奏效，但至少人们应该能够知道我在追求什么。

【问题讨论】：

类似setFinal({...schedule, start: startHour, end: endHour})
为什么submitPress会被随机调用？
@Urmzd ，不知道你说的随机调用是什么意思，按下按钮时会调用它。
@Nick 最终成为门票。
@corgiraptor submitPress 未绑定到任何命名空间。每次渲染都会重新调用它...即使它超出了App 的范围，它应该存在的唯一位置是Button < onPress。

标签： reactjs typescript react-native react-hooks

【解决方案1】：

在尼克的帮助下，我想出了解决方案。希望这将有助于其他人，如果他们遇到这个问题。请注意，我必须添加几个其他钩子（useRef 和 useEffect）才能正确呈现文本：

export default function App() {
  const [schedule, setSchedule] = useState({
    id: 12409,
    name: 'Schedule1',
    start: 9,
    end: 10
  })
  const [startHour, setStartHour] = useState({
    start: 7
  })
  const [endHour, setEndHour] = useState({
    end: 11
  })
  const [scheduleFinal, setFinal] = useState(schedule)
  const count = useRef(0);

  submitPress(() => {
      setFinal({...schedule,  start: startHour.start,end:endHour.end})
      count.current = count.current + 1;
    };
  useEffect(() => {
    if (count.current > 0) {
      alert(schedulefinal.start);
    }
  }, [schedulefinal]);
    return ( <
      View >
      <
      Button title = "Change Start and End"
      onPress = {
        submitPress
      }
      /> <
      Text > New start: {
        scheduleFinal.start
      }
      New End: {
        scheduleFinal.end
      } < /Text> <
      /View>
    );
  }

【讨论】：