在 React 中发布对象数组给了我一个额外的对象

Question

我正在尝试发布一组对象。它们出现在我的 HTML 中，但是当我使用 console.log 时，它总是给我一个额外的空对象。我的后端不喜欢。

代码如下：

https://codesandbox.io/embed/frosty-herschel-u8byqj?fontsize=14&hidenavigation=1&theme=dark

我尝试了很多不同的东西，但似乎没有任何效果

Answer 1

首先，您应该删除最初添加的对象：

const [initialState, setInitialState] = useState([]);

然后，也许你不想发送空动物，所以你应该在你的handleAdd中添加一个if子句来处理这种情况：

const handleAdd = (text) => {
    if (text.length === 0) {
      return;
    }
    const newAnimal = {
      id: uuidv4(),
      animal: text
    };
    setInitialState([newAnimal, ...initialState]);
  };

这应该对你有帮助。祝你学业顺利；

Answer 2

你总是用空动物初始化数组，因为动物状态总是被初始化为空文本。将数组初始化为空并添加一些逻辑以仅在选择该选项时才启用添加动物。

  const [initialState, setInitialState] = useState([]);

为了避免添加空动物，如果动物状态为假，您可以禁用该按钮。

<Button disabled={!animal} onClick={handleSubmit}>Add</Button>

除非您从选择组件中选择动物，否则应该禁用该按钮。