Можно ли использовать операторы if в пользовательских состояниях?

#javascript #reactjs

#javascript #reactjs

Вопрос:

У меня есть useState следующим образом:

 const [Total, setTotal] = useState(props.location.state.data.price)  
  

Я хотел бы, чтобы это было так, если определен props.location.state.data.price , он отображается, но если не определено, то возвращается 0.

Я пробовал нулевые операторы объединения, но это не работает. Любая помощь приветствуется. Спасибо

Комментарии:

1. какую ошибку он выдает при использовании нулевого объединения и как бы выглядел реквизит, если бы он был неопределенным

2. Необычно передавать props в state, если data.price не предполагается, что это какое-то значение по умолчанию.

Ответ №1:

Либо так:

 const [Total, setTotal] = useState(props.location?.state?.data?.price ?? 0)  
  

или вот так:

 const [Total, setTotal] = useState(
  props.location amp;amp;
  props.location.state amp;amp;
  props.location.state.data amp;amp;
  props.location.state.data.price || 0
)  
  

Ответ №2:

Вы, вероятно, хотели бы также обновить total , если props.location.state.data.price должно измениться в какой-то момент, верно? Так что я бы сделал это с эффектом:

 const [total, setTotal] = useState(0)  

useEffect(() => {
   if (!props.location?.state?.data?.price) {
       setTotal(0);
       return;
   }
   setTotal(props.location.state.data.price);
}, [props.location.state.data.price])

  

Комментарии:

1. Проблема с этим заключается в том, что он всегда будет выполнять начальную фиксацию в DOM (или в дереве хостов), 0 а затем запланирует обновление с правильным значением. Таким образом, пользователь может видеть ноль, когда есть фактическая цена.

2. Не говоря уже о том, что location может быть null , и тогда код внутри эффекта будет выдан…

3. Согласен, я добавил «?» к проверке в ответе. К вашему второму пункту: да, это может произойти, нам нужно будет проверить полный пример, чтобы увидеть, является ли это проблемой