ReactJS Входной компонент повторно выбирает данные из API при каждом повторном рендеринге - PullRequest
Новая
       87

ReactJS Входной компонент повторно выбирает данные из API при каждом повторном рендеринге

0 голосов
/ 06 августа 2020

У меня есть компонент, который извлекается из API. Он также получает set + setState, который заставляет его повторно отображать каждый раз при обновлении состояния, таким образом, бесполезно извлекая из api снова и снова.

Есть идеи, как я могу предотвратить его повторное получение? 

import React, { useState } from "react";
import Select from "./Select";

const App = () => {
  const [state, setState] = useState([]);

  return (
    <div>
      <Select state={state} name="email" setState={setState} />

      <span>
        current state <b>{state.email}</b>
      </span>
    </div>
  );
};

export default App;

import React, { useState, useEffect, useRef } from "react";
// import { instance } from "../../stores/UserStore";
import axios from "axios";
const Select = ({ state, setState, name, ...props }) => {
  const [data, setData] = useState([]);
  const renders = useRef(0);
  useEffect(() => {
    let isCurrent = true;
    if (isCurrent) {
      axios
        .get("https://jsonplaceholder.typicode.com/posts/1/comments")
        .then(res => setData(res.data));
    }
    return () => (isCurrent = false);
  }, []);

  useEffect(() => console.log(state), [state]);

  return (
    <div>
      <p>renders: {renders.current++}</p>
      <select
        name={name}
        value={state[name]}
        {...props}
        size="5"
        onChange={event => {
          setState({ ...state, [event.target.name]: event.target.value });
        }}
      >
        {data.map(item => (
          <option key={item.email} value={item.email}>
            {item.email}
          </option>
        ))}
      </select>
    </div>
  );
};
export default Select;

Также здесь коды и поле: https://codesandbox.io/s/input-rerender-issue-eyb3o

...