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

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

<Main addTodos={addTodos} />

Answer 2

如果要更新父组件的状态，则应将功能从父组件传递到子组件。

这是一个非常简单的示例，说明如何使用子（Main）组件中的钩子更新状态。

借助子组件中的按钮，您可以更新父（应用程序）组件的状态。

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 3

在Application.jsx中：

您只能在此处传递对addTodos的引用。左侧的名称可以是您想要的任何名称。

  <Main addTodos={addTodos} />

在Main.jsx中：

由于getTodo返回了Promise，诺言所解决的任何事情都会成为您的预期信息。

Answer 4

您正在通过addTodos作为道具。

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

但是，在子组件中，您正在使用

props.addTodo(input.current.value);

应为addTodos。

props.addTodos(input.current.value);

设置状态不是更新状态

4 个答案: