时间戳

首页 > 解决方案 > 设置状态不更新状态

javascript - 设置状态不更新状态

问题描述

我正在尝试在我的反应应用程序中使用状态挂钩。

但setTodos下面似乎没有更新todos
我工作的链接：https : //kutt.it/oE2jPJ 到 github的链接： https ://github.com/who-know-cg/Todo-react

import React, { useState } from "react";

import Main from "./component/Main";

const Application = () => {
  const [todos, setTodos] = useState([]);

  // add todo to state(todos)
  const addTodos = message => {
    const newTodos = todos.concat(message);
    setTodos(newTodos);
  };

  return (
    <>
      <Main
        addTodos={message => addTodos(message)}
      />
    </>
  );
};

export default Application;

在我的 main.js 中

const Main = props => {
  const input = createRef();
  return (
    <>
      <input type="text" ref={input} />
      <button
        onClick={() => {
          props.addTodo(input.current.value);
          input.current.value = "";
        }}
      >
        Add message to state
      </button>
    </>
  );
};

我希望每次按下按钮时，setTodos()都会getTodos()执行 and 并将消息添加到todos数组中。

但事实证明状态没有改变。（仍然，保留在默认的空白数组中）

标签： javascriptreactjs

解决方案

您不需要在 Main 中将 message 作为参数传递，只需传递函数的名称即可。

<Main addTodos={addTodos} />

推荐阅读