set状态不更新状态

Question

我试图在我的反应应用程序中使用状态钩子。

但是下面的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()，并将消息添加到todos数组中。

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

Answer 1

如果要更新父组件的状态，则应将函数从父组件传递给子组件。

这里是一个非常简单的例子，如何从子组件(主)更新状态。

在子组件按钮的帮助下，您可以更新父(应用程序)组件的状态。

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

  const addTodo = message => {
    let todosUpdated = [...todos, message];
    setTodos(todosUpdated);
  };
  return (
    <>
      <Main addTodo={addTodo} />
      <pre>{JSON.stringify(todos, null, 2)}</pre>
    </>
  );
};

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>
    </>
  );
};

演示在这里：https://codesandbox.io/s/silent-cache-9y7dl

Answer 2

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

<Main addTodos={addTodos} />

Answer 3

在Application.jsx中：

您可以在这里传递一个对addTodos的引用。左边的名字可以是你想要的。

  <Main addTodos={addTodos} />

在Main.jsx中：

因为getTodo返回一个承诺，所以该承诺决定的任何内容都将是您所期望的消息。