在反应钩子中获取没有正确的数据

Question

以下是在初始加载时运行良好的代码，但在单击获取数据按钮时，它现在可以正确获取数据。 让我知道我在这里做错了什么。

代码 -

const Sample = () => {
  const [todoCount, setTodoCount] = useState(3);
  const [todos, setTodos] = useState([]);
  useEffect(() => {
    Array(todoCount)
      .fill()
      .map((_x, i) => {
        return axios
          .get(`https://jsonplaceholder.typicode.com/todos/${i + 1}`)
          .then((res) => {
            const todo = res.data.title;
            setTodos((prevTodos) => {
              return [...prevTodos, todo];
            });
          });
      });
  }, [todoCount]);

  const fetchMore = (e) => {
    setTodoCount((prevCount) => prevCount + 1);
  };

  return (
    <div className="example">
      <h3>Fetch data in a loop</h3>
      <ul>
        {todos.map((x, i) => (
          <li key={i}>{x}</li>
        ))}
      </ul>

      <button onClick={fetchMore}>Fetch More</button>
    </div>
  );
};

export default Sample;

CodeSandBox - https://codesandbox.io/s/black-mountain-y8xpl

预期结果 -

1. 初始加载 - 3 个标题
2. 单击“获取更多”按钮，它将 4 添加到列表中，使其变为 7 而应该是 4（仅增加 1）。

Answer 1

如果您在setTodos function 中运行 setTodos，它会在每次累积Todos时运行。 你可以试试这个：

const Sample = () => {
  const [todoCount, setTodoCount] = useState(3);
  const [todos, setTodos] = useState([]);
  useEffect(() => {
    const todoArray = Array(todoCount)
      .fill()
      .map((_x, i) => {
        return axios
          .get(`https://jsonplaceholder.typicode.com/todos/${i + 1}`)
          .then((res) => {
            const todo = res.data.title;
            return todo;
          });
      });
    Promise.all(todoArray).then((todos) => {
      console.log(todos);
      setTodos(todos);
    });
  }, [todoCount]);

一次设置待办事项也会使应用程序在每次 fetchMore 点击时重新渲染一次，而不是为结果中的每个待办事项。

Answer 2

您会遇到这种行为，因为一旦todoCount更新useEffect再次运行。 现在todoCount是 4 个，这样它将再获取 4 个 todos（大多数会重复，因为只有最后一个i值应该带来一个新值）。

给定您的代码，您可以在 Mount 上进行初始计数获取，并在其他情况下获取后续计数：

const initialCount = 3
const baseUrl = 'https://jsonplaceholder.typicode.com/todos'

const Sample = () => {
  const [todoCount, setTodoCount] = useState(initialCount);
  const [todos, setTodos] = useState([]);

  useEffect(() => {
    Array(initialCount)
      .fill()
      .map((_x, i) => {
        return axios
          .get(`${baseUrl}/${i + 1}`)
          .then((res) => {
            const todo = res.data.title;
            setTodos((prevTodos) => {
              return [...prevTodos, todo];
            });
          });
      });
  }, []);

  useEffect(() => {
    if (todoCount === initialCount) return
    axios
      .get(`${baseUrl}/${todoCount}`)
      .then((res) => {
        const todo = res.data.title;
          setTodos((prevTodos) => {
            return [...prevTodos, todo];
          });
       })
  }, [todoCount])

虽然todoCount是从todos长度派生的，它是一个冗余的 state 你可以删除它。 之后，您可以只更改一个useEffect并将 fetch function 更改为使用todos.length作为参考：

const initialCount = 3
const baseUrl = 'https://jsonplaceholder.typicode.com/todos'

const Sample = () => {
  const [todos, setTodos] = useState([]);
  useEffect(() => {
    Array(initialCount)
      .fill()
      .map((_x, i) => {
        return axios
          .get(`${baseUrl}/${i + 1}`)
          .then((res) => {
            const todo = res.data.title;
            setTodos((prevTodos) => {
              return [...prevTodos, todo];
            });
          });
      });
  }, []);

  const fetchMore = (e) => {
    axios
      .get(`${baseUrl}/${todos.length + 1}`)
      .then((res) => {
         const todo = res.data.title;
         setTodos((prevTodos) => {
           return [...prevTodos, todo];
         });
       });
  };