Javascript 在todo中将第一个元素保存到数组时出现问题

在React with React挂钩中，我的简单todo应用程序有问题

当我获取inputValue并尝试将其分配给object并保存到我的items数组时，它不起作用

（onSubmit操作之后的第一个赋值是空数组，我完全不知道为什么。但是第二个按钮操作工作正常

有人能帮帮我吗

---

问题在于，您在设置新项目后立即执行

console.log

，但React会在新的重新渲染时进行更新，因此在组件重新渲染之前，您不会看到更改

要进行测试，可以通过在

按钮下添加以下内容来呈现当前项目：

          <p>Got items:</p>
            {items.map((item, i) => (
              <div key={i}>{item.name}</div>
            ))}
          </div>

已获取项目：

{items.map（（item，i）=>(
{item.name}
))}
问题在于，您在设置新项目后立即执行
console.log
，但React会在新的重新渲染时进行更新，因此在组件重新渲染之前，您不会看到更改

要进行测试，可以通过在
按钮下添加以下内容来呈现当前项目：

          <p>Got items:</p>
            {items.map((item, i) => (
              <div key={i}>{item.name}</div>
            ))}
          </div>

已获取项目：

{items.map（（item，i）=>(
{item.name}
))}
您可以在useffect钩子中执行类似的副作用（如console.log），它将在每次
项目更新后运行，并将正确的事情记录下来

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

您可以在useffect钩子中执行这种副作用（比如console.log），它将在每次
项
变量更新后运行，并将正确的事情记录下来

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

如果要先执行控制台操作，则需要将数组分散到另一个数组中，因为setItems在控制台点上将作为异步项工作。日志项中没有值。如果要先执行控制台操作，则需要将数组分散到另一个数组中，因为setItems在控制台点上作为异步项工作。日志项中没有值。谢谢，我认为我的组件ent将在onClick；p之后呈现，但现在我明白了，谢谢：）或者在返回函数之前添加console语句。每次组件渲染时它都会调用。谢谢，我想我的组件在onClick之后会渲染；但现在我明白了，谢谢：）或者通过在返回函数之前添加控制台语句。每次组件渲染时，它都会调用。Items是一个数组，useEffect会进行浅层比较，即这会导致多个不必要的渲染。据我所知，
setItems
函数将以不变的方式更新数组，因为引用是新的，它将正确更新，并且仅在实际状态更新时运行。useEffect本身不调用重新渲染，因为它只是执行console.log，所以我不明白你在说什么。对不起，我的意思是，它会导致在每次重新渲染时运行调用
useEffect
中的回调。通常使用数组/对象作为
useffect
的第二个参数是一种不好的做法：我知道你是从哪里来的，这是有道理的。谢谢你的解释，但是对于这个例子，我们真的可以忽略第二个参数，因为Chazzy只想在每次更新时看到实际的项目数组，所以在每次渲染时调用效果是有意义的，不是吗？就像你建议在每个渲染器上渲染一个数组那样我们需要传递一个空数组，因为根本不传递第二个参数将在每次渲染时再次调用回调。Items是一个数组，useEffect进行浅层比较，即这将导致多个不必要的渲染。据我所知，
setItems
函数将以不可变的方式更新数组，并且由于引用是新的，它将正确更新，并且仅在实际状态更新时运行。useEffect本身不调用重新渲染，因为它只是执行console.log，所以我不明白你在说什么。对不起，我的意思是，它会导致在每次重新渲染时运行调用
useEffect
中的回调。通常使用数组/对象作为
useffect
的第二个参数是一种不好的做法：我知道你是从哪里来的，这是有道理的。谢谢你的解释，但是对于这个例子，我们真的可以忽略第二个参数，因为Chazzy只想在每次更新时看到实际的项目数组，所以在每次渲染时调用效果是有意义的，不是吗？正如您建议在每个渲染器上渲染一个数组一样，在这种情况下，我们需要传递一个空数组，因为根本不传递第二个参数将再次调用每个渲染器上的回调。