無法控制台記錄更新的 state 陣列

Question

我正在制作一個簡單的應用程序，用戶可以在單擊按鈕時創建一個新表單，因此為此，我有一個數組 state，如下所示：

const [numbers, setNumbers] = useState([0]);
const [count, setCount] = useState([0]);

在我的按鈕 onClick 方法上我有這個，

setCount(count + 1);
setNumbers(numbers.concat(numbers[0] + count));

在我的渲染方法中，我有：

{numbers.map((number) => {
      return (
        <div key={number}>
          <InputCreator id={number} value={number} />
        </div>
      );
    })}

我的 InputCreator 組件是一個簡單的回調組件，文本字段很少。

到目前為止，它運作良好。 最近我想添加一個刪除功能，用戶可以在其中刪除該特定表單。 So, I added.a button inside this form and on the onClick method, I tried console loging the "numbers" state to check everything is working, but it logs only the default value I have given while creating the state and not the updated state . 可能是什么原因？ 所以我的想法是使用傳遞的道具從數組中刪除該索引，以便組件將使用更新后的 forms 編號重新渲染。 有一個更好的方法嗎？

編輯：這是我的 InputCreator 組件，

const InputCreator = useCallback((props) => {
const { id, value } = props;
// console.log(titles[id]);
return (
  <div>
    <Col xs={12} md={8}>
      <div className={styles.container}>
        <Form
          noValidate
          validated={false}
          onSubmit={handleSubmit}
          encType="multipart/form-data"
        >
          <Form.Group controlId="formGroupTitle">
            <Form.Label>Title</Form.Label>
            <Form.Control
              type="text"
              placeholder="Title"
              onChange={(e) => handleChange(e, value)}
              name="title"
              value={titles[id]}
            />
          </Form.Group>
          <Form.Group controlId="formGroupTitle">
            <Form.Label>Description</Form.Label>
            <Form.Control
              type="text"
              name="description"
              placeholder="Max limit 30"
              onChange={(e) => handleChange(e, value)}
              maxLength={31}
              value={descriptions[id]}
            />
          </Form.Group>
          <Button
          variant="outline-primary"
          size="sm"
          className={styles.deleteBtn}
          onClick={(e) => handleDelete(e, number)}
          >
          X
          </Button>
          </Form>
          )})

處理刪除：

const handleDelete = (e, value) => {
  e.preventDefault();
  console.log(numbers);
}

Answer 1

我將指出我看到的錯誤，因為您的問題措辭不明確。

鍵沒有傳遞到它們被傳遞到列表中，以便為具有唯一 ID 的每個元素創建一個列表。 我不確定您在渲染方法中要做什么，但我建議您執行以下操作：

const renderNumbers = () => myArray.map((number, index) =>
  <MyComponent key={index} number={number} />

刪除一個元素。 創建一個接收 ID 的 function。 過濾它以顯示沒有該 ID 的新數組，下面是您可以應用的示例。

const deletePerson = (id) => {
    setNumbers(numbers.filter((number) => number.id !== id));
  };

將此句柄發送給刪除元素的按鈕

const handleDeleteNumber = () => {
    deleteNumber(number.id);
  };

制作一個可用於所有輸入更改的 handleInputChange()。 比如這個：

const handleInputChange = (event) => {
    setInfo({ ...info, [event.target.name]: event.target.value });
  };

在標簽中，您像這樣分別傳入 id 和值

value={descriptions}
key={id}