반응 후크와 타이프스크립트를 사용하여 배열에서 개체를 푸시하는 방법

반응 후크와 타이프스크립트를 사용하여 배열에서 개체를 푸시하는 방법

나는 이것이 완전히 잘못된 질문이라는 것을 알고 있고 미안하지만 나는 양식을 제출할 때 어떻게 오브젝트를 상태 배열로 넣어야 하는지 알아내려고 노력한다.감사합니다.

interface newList {
  name: string;
}

const ListAdder = () => {
  const [listName, setListName] = useState("");
  const [listArray, setListArray] = useState<any>([]);

  const submitHandler = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    const myNewList: newList = {
      name: listName,
    };

    setListArray([...listArray].push(myNewList));
    setListName("");
    console.log(listArray);
  };

  const listNameHandler = (e: FormEvent<HTMLInputElement>) => {
    setListName(e.currentTarget.value);
  };

  return (
    <>
      <form onSubmit={submitHandler}>
        <label>Create your List</label>
        <br />
        <input
          type="text"
          placeholder="List name is..."
          value={listName}
          onChange={listNameHandler}
        />
        <button type="submit">Add the List</button>
      </form>
    </>
  );
};

문제는 업데이트된 어레이 대신 푸시 결과, 즉 새 길이를 저장한다는 점이다.

setListArray([...listArray].push(myNewList)); // <-- saves result of push, [].length

넌 할 수 있다.concat새 요소:

setListArray([...listArray].concat(myNewList));

아니면 그냥 추가해.

setListArray([...listArray, myNewList]);

추가 반 관련 문제, 상태 로그를 콘솔로 기록할 수 없으며 즉시 업데이트될 것으로 예상할 수 없음.

setListArray([...listArray, myNewList]);
console.log(listArray); // <-- still current state

반응 상태 업데이트는 비동기적이므로 이와 같은 상태를 로깅하면 다음 렌더 주기의 대기 상태가 아니라 현재 렌더 주기에서만 상태가 기록된다.업데이트 후 상태를 기록하려면useEffect의지할 곳 없이 지내다

useEffect(() => {
  console.log(listArray);
}, [listArray]);

참조URL: https://stackoverflow.com/questions/67744123/how-to-push-an-object-in-an-array-using-react-hooks-and-typscript