Есть ли проблема с моим useState? Я чувствую, что значения не совпадают прямо в моем Array ReactNative

Question

Мне было так любопытно узнать мой вывод console.log.

У меня есть кнопка, при нажатии она должна в основном добавлять 1 к состоянию использования ( 1 ), которое я создал, но кажется, что я делаю что-то не так; Пожалуйста, мне нужна помощь, чтобы узнать, правильно ли я управляю своим состоянием {я использую React HOOK}

const [procedureCounter, setProcedureCounter] = useState([1]);
const addProcedureHandler = () => {
setProcedureCounter((procedureCounter) => [
...ProcedureCounter,
  {
    id: procedureCounter.length,
    //value: procedureCounter + 1 // value is undefined for some reason so I removed it but still works
  },
]);
console.log(ProcedureCounter);


{       procedureCounter.map((item, value) => (
        <View style={{ marginVertical: 15 }} key={item.id + 1}>
          <ProcedureSteps step={value + 1} /> //This is a TexteInput Form 
        </View>
      ))}

<TouchableOpacity onPress={addProcedureHandler}>
      ADD Button
    </TouchableOpacity>

После нажатия кнопки «ДОБАВИТЬ» она не начинается с 2, так как у меня 1 установлено как initialState. Ниже показан вывод моего терминала после трехкратного нажатия или нажатия кнопки «Добавить»

Спасибо, что нашли время изучить это. Я очень надеялся, что объяснил это как можно лучше. Еще раз спасибо!

Answer 1

Во-первых, в вашем состоянии должен быть согласованный тип данных, чтобы можно было легко сопоставить значения для создания компонентов.

const [procedureCounter, setProcedureCounter] = useState([{
  id: 1,
  value: 1
}]);

Причина, по которой вы получаете undefined, заключается в том, что вы неправильно обращаетесь к массиву. Ознакомьтесь с приведенным ниже фрагментом, чтобы узнать, как его использовать. Я также обновил итерацию карты для создания компонентов.

const [procedureCounter, setProcedureCounter] = useState([{
  id: 1,
  value: 1
}]);
const addProcedureHandler = () => {
setProcedureCounter((procedureCounter) => [
...procedureCounter,
  {
    id: procedureCounter[procedureCounter.length -1].id + 1,
    value: procedureCounter[procedureCounter.length -1].value + 1
  },
]);
console.log(procedureCounter);

{       procedureCounter.map((item) => (
        <View style={{ marginVertical: 15 }} key={item.id}>
          <ProcedureSteps step={item.value} /> //This is a TexteInput Form 
        </View>
      ))}

<TouchableOpacity onPress={addProcedureHandler}>
      ADD Button
</TouchableOpacity>