реагируйте на use .map() с помощью useState

#reactjs

Вопрос:

index.js

 const [questionRepliesAll, setQuestionRepliesAll] = useState([])

const [questionReplies, setQuestionReplies] = useState({
    replies: [
        {
            desc: 'hello word 1'
        },
        {
            desc: 'hello word 2'
        }
    ],
    reply_users: [
        {
            user: 1
        },
        {
            user: 2
        }
    ]
})

questionReplies.replies.map((reply, i) => {
    setQuestionRepliesAll([...questionRepliesAll, {'reply': desc, user_id: questionReplies.reply_users[i].user])})

Результаты

 [{reply: 'hello word 1', user_id: 1}, {reply: 'hello word 2', user_id: 2}] // expected

[] // actual result

первая реализация

 const combined = questionReplies.replies.map((reply, i) => {
                    return {'reply': desc,
                    user_id: questionReplies.reply_users[i].id}
                })
setQuestionRepliesAll(combined)

В принципе, я хочу объединить 2 массива в 1 и добавить его в questionRepliesAll, я попытался добавить его с назначением комбинированного массива переменной ahnd затем установить его setQuestionRepliesAll(combined) , но что скинул ошибки, когда я попытался с помощью .карта (), который был Objects are not valid as a React child , спускаемся ниже, чтобы увидеть, что я пытался сделать сначала, любая помощь приветствуется!

1. Objects are not valid as a React child Ошибка связана с тем, как вы что- то визуализируете. Ваша setQuestionRepliesAll(combined) версия кажется прекрасной, за исключением того, что вы не гарантируете, что все массивы имеют одинаковую длину (или используете правильные проверки на нуль). Можете ли вы обновить свой вопрос, чтобы включить, как вы визуализируете то, что вы визуализируете?

Ответ №1:

Я бы рекомендовал использовать a for loop для этой функции.

 let arr = {
    replies: [
        {
            desc: 'hello word 1'
        },
        {
            desc: 'hello word 2'
        }
    ],
    reply_users: [
        {
            user: 1
        },
        {
            user: 2
        }
    ]
}
let formattedArray = [];
for(i=0;i<arr.replies.length;i  ){
  formattedArray.push({reply:arr.replies[i].desc,user:arr.reply_users[i].user})
}
console.log(formattedArray)

Реализация в вашем случае :

 import {useEffect, useState} from 'react';

export default function App() {
  const [questionRepliesAll, setQuestionRepliesAll] = useState([])
    
  const [questionReplies, setQuestionReplies] = useState({
      replies: [
          {
              desc: 'hello word 1'
          },
          {
              desc: 'hello word 2'
          }
      ],
      reply_users: [
          {
              user: 1
          },
          {
              user: 2
          }
      ]
  });

  useEffect(()=>{
    let formattedArray =[]
    for(var i=0;i<questionReplies.replies.length;i  ){   
      formattedArray.push({reply:questionReplies.replies[i].desc,user:questionReplies.reply_users[i].user})
    }
    setQuestionRepliesAll(formattedArray);  
  },[questionReplies])


  return (
    <div>
      <ul>{questionRepliesAll.map((item,key)=><li>user {item.user} ,  reply : {item.reply}</li>)}</ul>
    </div>
  );
}