Попытка отобразить div из значения объекта

ProgramBox

Попытка отобразить div из значения объекта

Post author:admin
Запись опубликована:11 января, 2022
Post category:Вопросы по программированию

#reactjs

Вопрос:

Я пытаюсь загрузить div из объекта под названием matchedLog, но на экране ничего не отображается. Мне интересно, не вышел ли мой код из строя, я попытался переместить фрагмент кода карты ниже возврата, но затем он выдает ошибку. Я действительно получаю значение matchedLog, переданное этой функции, когда я console.log, поэтому я думаю, что это код для этой функции. Спасибо вам за вашу помощь, я действительно ценю это.

 renderMatchedLogs = (matchedLog) => {
        
        return Object.entries(matchedLog).map(([key, value], i) => {
            return (
                <div>
                        {value.dateKey}
                        <br />
                        {value.mealKey}
                        <br />
                        {value.foodSelectedKey}
                        <br />
                        {value.reactionKey}
                        <br />
                </div>
            );
        });
    };

Когда я console.log(сопоставленный журнал), это то, что я получаю:

 {dateKey: "2021-08-17", mealKey: "breakfast", foodSelectedKey: Array(1), reactionKey: "neutral"}

Массив для ключа Foodselected выглядит следующим образом:

 foodSelectedKey: ["Test"]

Ответ №1:

Object.entries(matchedLog).map(([key, value], i) Код не нужен и является причиной вашей проблемы.

Вы создаете массив из объекта, который выглядит следующим образом:

 // Result of Object.entries(matchedLog)
[
    [
        "dateKey",
        "2021-08-17"
    ],
    [
        "mealKey",
        "breakfast"
    ],
    [
        "foodSelectedKey",
        [
            "test"
        ]
    ],
    [
        "reactionKey",
        "neutral"
    ]
]

Поэтому при сопоставлении вы больше не можете получить доступ к значениям, подобным этому: value.key , вы бы просто использовали value .

 const obj = {dateKey: "2021-08-17", mealKey: "breakfast", foodSelectedKey: ['test'], reactionKey: "neutral"}

console.log(Object.entries(obj).map(([key, value]) => value))

Но, как я уже упоминал, в этом нет никакой необходимости.

У вас уже есть объект, поэтому нет необходимости превращать его в массив и сопоставлять его.

 renderMatchedLogs = (matchedLog) => {
  return (
    <div>
      {matchedLog.dateKey}
      <br />
      {matchedLog.mealKey}
      <br />
      {matchedLog.foodSelectedKey}
      <br />
      {matchedLog.reactionKey}
      <br />
    </div>
  );
};

Что касается того, что я попытался переместить фрагмент кода карты ниже возврата, но затем он выдает ошибку:

Если matchedLog это возможно undefined , и вы получаете ошибку о доступе к свойству undefined, просто оберните все возвращаемое значение в условное:

 renderMatchedLogs = (matchedLog) => {
  if (matchedLog) {
    return // Your JSX from above
  }
  return null;
}

Пример выполнения:

 const obj = {dateKey: "2021-08-17", mealKey: "breakfast", foodSelectedKey: ['test'], reactionKey: "neutral"}

const Example = () => {
  const renderMatchedLogs = (matchedLog) => {
    return (
      <div>
        {matchedLog.dateKey}
        <br />
        {matchedLog.mealKey}
        <br />
        {matchedLog.foodSelectedKey}
        <br />
        {matchedLog.reactionKey}
        <br />
      </div>
    );
  };
  
  const JSX = renderMatchedLogs(obj)

   return <div>{JSX}</div>
}

ReactDOM.render(<Example />, document.getElementById('root'));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>

1. Потрясающе, спасибо тебе! У меня все еще возникают некоторые проблемы с отображением данных на экране, но я вынул Object.entries часть кода

2. Я просто добавил бегущий пример к своему ответу. Функция работает, поэтому проблема с отображением на экране должна быть где-то в другом месте вашего кода. Невозможно сказать, где именно.

3. Я согласен, мне нужно будет продолжать изучать это. Спасибо вам за вашу помощь, я ценю это!

4. Без проблем. Если вы сведете это к другой проблеме, не стесняйтесь задавать другой вопрос. Удачи!

Ответ №2:

Вам нужно уничтожить реквизит. Предполагая, что renderMatchedLogs это компонент, он должен быть назван RenderMatchedLogs . Вы вызываете его как <RenderMatchedLogs matchedLogs={...} /> , а затем получаете доступ к переданным соответствующим журналам как property к реквизиту, переданному компоненту. Таким образом, определение должно быть:

 const RenderMatchedLogs = (props) => {
  return Object.entries(props.matchedLog).map(([key, value], i) => {
    return (
      <div>
        {value.dateKey}
        <br />
        {value.mealKey}
        <br />
        {value.foodSelectedKey}
        <br />
        {value.reactionKey}
        <br />
      </div>
    );
  });
}

или

 const RenderMatchedLogs = ({ matchedLog }) => { // destructured props
  return Object.entries(matchedLog).map(([key, value], i) => {
    return (
      <div>
        {value.dateKey}
        <br />
        {value.mealKey}
        <br />
        {value.foodSelectedKey}
        <br />
        {value.reactionKey}
        <br />
      </div>
    );
  });
}