проблемы с отображением извлеченных данных в раскрывающемся списке в React - PullRequest
Новая
       5

проблемы с отображением извлеченных данных в раскрывающемся списке в React

0 голосов
/ 05 мая 2020

Я получаю список пользователей с сервера внутри хука useEffect и пытаюсь отобразить его в раскрывающемся списке HTML select. что-то вроде этого, ссылка на код и ящик Как видите, в раскрывающемся списке ничего не отображается. Но при этом все данные присутствуют в том виде, в каком они отображаются в списке ниже.

Я попытался реализовать обычный HTML select без какой-либо библиотеки, в настоящее время я использую response-select. Также я пробовал это: 

{ posts? (<Select options={posts}) : null }

Но безуспешно. Что мне здесь не хватает ?? Как я могу отобразить данные, полученные с сервера, в раскрывающемся списке?

Ответы [ 2 ]

5 голосов
/ 05 мая 2020

Вам необходимо добавить опору getOptionLabel на Select.

Рабочая демонстрация

<Select options={posts} getOptionLabel={item=>item}/>

Из документации

getOptionLabel typeof getOptionLabel = (option) => string

Преобразует данные опции в строку, которая будет отображаться в качестве метки компонентами

1 голос
/ 05 мая 2020

response-select принимает значение и атрибут метки. Либо обновите свое поле, либо используйте тот же ключ, что и response-select принимает. 

export default function App() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    const config = {
      "Content-Type": "application/json"
    };
    const url = `https://jsonplaceholder.typicode.com/posts`;
    axios.get(url, config).then(res => {
      setPosts(res.data);
    });
  }, []);
  let updatedData = posts.map(post=> ({...post, label:post.title, value:post.title}))
  console.log(posts);
  return (
    <div className="App">
      <h1>Hello React CodeSandbox</h1>
      <div className="side-by-side">
        <h3>Latest Posts</h3>
        <div className="side-by-side">
          <span style={{ paddingRight: "20px" }}>Show Posts</span>
        </div>
      </div>
      <Select options={updatedData} />
    </div>
  );
}

Рабочий Live demo

...