js react получить данные из Promise

Question

я получаю данные через axios, мне возвращается массив данных и по моей логике, я должен этот ответ присвоить какому-нибудь массиву и там найти то единственное значение, которое мне требуется, у меня нет специального get запроса на получение одного item из массива, поэтому я придумал такую логику, получаю по api все items затем по id ищу нужного мне и отрисовываю на странице

const getOneApi = async (id) => {
    const response = await axios.get('http://localhost:3000/db.json')
    .catch((err) => {
        console.log(('Err', err));
    })
    return response.data.weapon;
}
useEffect( async (id) => {
    let a = getOneApi()
    .then(response => response.id == id);
    console.log(a);
}, [])

в качестве бд у меня просто файл в папке public, чисто тренеровочный вариант. Я пробовал пройтись с map по этому массиву response.data.weapon, пробовал использовать filter, подскажите что и как здесь я в промисах ещё не разобрался

Answer 1

Можно получать весь массив элементов и далее отрисовывать нужный элемент из массива. получается примерно так:

import React from "react";
const testData = [
  { id: 1, name: "name_1", description: "description_1" },
  { id: 2, name: "name_2", description: "description_2" },
  { id: 3, name: "name_3", description: "description_3" },
  { id: 4, name: "name_4", description: "description_4" },
  { id: 5, name: "name_5", description: "description_5" },
];
const App = () => {
  const [list, setList] = React.useState([]);
  const [selectedItem, setSelectedItem] = React.useState(null);
React.useEffect(() => {
    const getData = async () => {
      // const response = await axios.get('http://localhost:3000/db.json') 
      const response = await Promise.resolve(testData);
      setList(response);
    };
    getData();
  }, []);
return (
    <div>
      <div>
        {list.map((item) => {
          return (
            <button key={item.id} onClick={() => setSelectedItem(item)}>
              Name: {item.name}
            </button>
          );
        })}
      </div>
      <div>
        {selectedItem
          ? Selected item is: ${selectedItem.name}
          : "Please select some item ..."}
      </div>
    </div>
  );
};
export default App;

Или можно дополнительно снова получать все данные при смене ID и также отображать выбранный элемент:

import React from "react";
const testData = [
  { id: 1, name: "name_1", description: "description_1" },
  { id: 2, name: "name_2", description: "description_2" },
  { id: 3, name: "name_3", description: "description_3" },
  { id: 4, name: "name_4", description: "description_4" },
  { id: 5, name: "name_5", description: "description_5" },
];
const App = () => {
  const [list, setList] = React.useState([]);
  const [selectedItemId, setSelectedItemId] = React.useState(null);
React.useEffect(() => {
    const getData = async () => {
      // const response = await axios.get('http://localhost:3000/db.json')
      const response = await Promise.resolve(testData);
      setList(response);
    };
    getData();
  }, []);
return (
    <div>
      <div>
        {list.map((item) => {
          return (
            <button key={item.id} onClick={() => setSelectedItemId(item.id)}>
              Name: {item.name}
            </button>
          );
        })}
      </div>
      <SelectedItem id={selectedItemId} />
    </div>
  );
};
export default App;
export const SelectedItem = ({ id }) => {
  const [currentItem, setCurrentItem] = React.useState();
React.useEffect(() => {
    const getData = async () => {
      const response = await Promise.resolve(testData);
      setCurrentItem(response.find((item) => item.id === id));
    };
    getData();
  }, [id]);
return (
    <div>
      {currentItem
        ? Selected item is: ${currentItem.name}
        : "Please selectsome item ..."}
    </div>
  );
};