如何将输入数据作为对象存储在数组中？

AnxiousMaster 发表于 Dev

焦虑大师

如何使用将输入数据作为对象存储在数组中useState？请帮忙。我需要帮助。我无法获得所需的输出来显示输入值。

const Form = () => {
      const [allNotes, setAllNotes] = useState([{}]);
      const [notes, setNotes] = useState({
        name: "",
        age: "",
        class: "",
        request: "",
      });
    
      const nameChangeHandler = (event) => {
        setNotes((prevState) => {
          const newState = { ...prevState, name: event.target.value };
          return newState;
        });
      };
      const ageChangeHandler = (event) => {
        setNotes((prevState) => {
          const newState = { ...prevState, age: event.target.value };
          return newState;
        });
      };
      const classChangeHandler = (event) => {
        setNotes((prevState) => {
          const newState = { ...prevState, class: event.target.value };
          return newState;
        });
      };
      const requestChangeHandler = (event) => {
        setNotes((prevState) => {
          const newState = { ...prevState, request: event.target.value };
          return newState;
        });
      };
    
      const submitHandler = () => {
        setAllNotes((prevState) => {
          const newState = {
            ...prevState,
            name: notes.name,
            age: notes.age,
            class: notes.class,
            request: notes.request,
          };
          return newState;
        });
      };

亚瑟指甲花

一切看起来都不错，也许除了两个小错误：

让我们为all notes一个空数组创建初始状态，比如

const [allNotes, setAllNotes] = useState([]);
里面的新数组setAllNotes应该是数组而不是对象，例如：

    const submitHandler = () => {
      setAllNotes((prevState) => {
        const newState = [
          ...prevState,
          {
            name: notes.name,
            age: notes.age,
            class: notes.class,
            request: notes.request,
          }
        ];
        return newState;
      });
    };

希望这使它工作！

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。