Блог

Главная - Вопросы по программированию - Почему я не вижу разные наценки li на моей странице?

Почему я не вижу разные наценки li на моей странице?

#javascript #node.js #reactjs #jsx #next.js

#javascript #node.js #reactjs #jsx #next.js

Вопрос:

Вот мой код

 export default function Search({ res }) {
    var arr = Object.entries(res)
    console.log(arr)
    return (
      <div>
        Here's the result :
        <ol>
            {arr.map((value, index) => {
                <li key={index}>{value.title}</li>
            })}
        </ol>
      </div>
    );
  }
  
  export async function getServerSideProps({ params }) {
    const { id } = params;
  
    const req = await fetch(
      `http://localhost:4000/reddit/${id}`
    );
    const res = await req.json();
  
    return {
      props: { res } // will be passed to the page component as props
    };
  }

На данный момент :

 console.log(arr)

Эта строка выводит мне красивый массив со 100 подмассивами, потому что выборка из API была хорошей…

Данные выглядят как этот массив : [["0", {title: "I like eating", textValue: "Yes, I do"}], ["1", {title: "I like dirinking", textValue: "Yes, I do"}]]

Но на странице у меня есть только разметка

    внутри ничего нет

    Мне не удается узнать, почему…

Комментарии:

1. Пожалуйста, покажите нам arr , как выглядят значения внутри. Кроме того, когда вы говорите, что у вас есть «только разметка», вы имеете в виду, что страница показывает фактические HTML-теги пользователю, просматривающему страницу?

2. Является ли структура данных такой или что-то в этом роде? [{id:1,title:'t1'},{id:2,title:'t2'}]

3. Имея только разметку, я имею в виду, что страница, отображаемая на стороне клиента, возвращает только <div>Here's the result :<ol></ol></div>

4. Данные выглядят следующим образом: [[«0», {title: «Я люблю есть», textValue: «Да, люблю»}], [«1», { заголовок: «Мне нравится диринкинг», тексТовое значение: «Да, нравится»}]]

Ответ №1:

Вам нужно вернуть функцию map, также вы должны увидеть некоторую ошибку на своей консоли по этому поводу: Expected to return a value in arrow function. (array-callback-return) 

 return (
  <div>
    Here's the result :
    <ol>
        {arr.map((value, index) => ( //<--return items
            <li key={index}>{value.title}</li>
        ))}
    </ol>
  </div>
);