ReactJS同时将函数从父级传递给子级并访问父级状态未完全返回

Question

I was trying to access Parent state when a function is called from Child component, for that created a function in Parent component and passed it to Child, issue is I am not able to access the state completely. for example on button click I add a new input field and a delete button, suppose I added 10 input fields, and added all of them in state array, but when i click delete button of second input field, the count I get from state is 1, similar if I click 5th delete button i get count as 4 and it only show me 4 items in state, but it has 10 items Here is an example link https://codesandbox.io/s/add-react-component-onclick-forked-t2i0ll?file=/src/index.js:0-869

import React, { useState } from "react";
import ReactDOM from "react-dom";

const Input = ({ deleteRow, position }) => {
  const handleDelete = () => deleteRow(position);
  return (
    <>
      <input placeholder="Your input here" />
      <button onClick={handleDelete}>Delete</button>
    </>
  );
};

const Form = () => {
  const [inputList, setInputList] = useState([]);

  const onDeleteRow = (position) => {
    console.log("inputCount", inputList);
  };
  const onAddBtnClick = (event) => {
    setInputList(
      inputList.concat(
        <Input
          key={inputList.length}
          position={inputList.length}
          deleteRow={onDeleteRow}
        />
      )
    );
  };

  return (
    <div>
      <button onClick={onAddBtnClick}>Add input</button>
      {inputList}
    </div>
  );
};

ReactDOM.render(<Form />, document.getElementById("form"));

Answer 1

It's called a stale closure .

You can avoid that by not storing react elements inside the state.

Example:

const Form = () => {
  const [inputList, setInputList] = useState([]);

  const onDeleteRow = (position) => {
    console.log("inputCount", inputList);
  };
  const onAddBtnClick = (event) => {
    setInputList([...inputList, inputList.length])
    );
  };

  return (
    <div>
      <button onClick={onAddBtnClick}>Add input</button>
      {inputList.map(item => (
        <Input
          key={item}
          position={item}
          deleteRow={onDeleteRow}
        />
      )}
    </div>
  );
};