Блог

У меня есть JSON, который приходит вот так, и я хочу показать этот JSON в таблице в React.

 {
  "Status": true, 
  "discounts": { 
    "individual": {
      "number_of_cars_discount": {
        "1": "1", 
        "10": "1", 
        "2": "0.98", 
      }
    }
  }, 
  "main_price": {
    "client_type": "individual", 
    "large_car": {
      "100": "3", 
      "1000": "0.9", 
      "100000": "0.60", 
    }, 
  }
}
 

Поэтому, чтобы сделать это, я определил

 const [mainPrice, setMainPrice] = useState({});
 

в родительском компоненте, и я извлек его вот так:

 setMainPrice(res.data.main_price);
 

Я отправил mainPrice в дочерний компонент, где я хочу отобразить JSON в таблице:

 <tbody>
          <tr>
            <td>
            {Object.keys(individualPosts).map((key) => (
              <tr>
                <td key={key}>{individualPosts[key]}</td>
              </tr>
            ))}
            </td>
            <td>
            {Object.keys(mainPrice.large_car).map((key) => (
              <tr>
                <td key={key}>{mainPrice.large_car[key]}</td>
              </tr>
            ))}
            </td>
          </tr>
        </tbody>
 

Но это дает мне ошибку: ошибка типа: Не удается преобразовать неопределенное или нулевое значение в объект

Но я не мог понять, почему.

У меня есть другие типы автомобилей, такие как большие вагоны, маленькие вагоны, поэтому мне нужно взять такую основную цену. Я не хочу определять все типы автомобилей и отправлять их дочернему компоненту в качестве реквизита. Или я должен сделать это так?

Пожалуйста, дайте мне совет и решение.

Проверка на ноль требуется в таких случаях, чтобы избежать ошибок.

Попробуйте это

 <td>
  {Object.keys(mainPrice?.large_car).length > 0 amp;amp; Object.keys(mainPrice?.large_car).map((key) => (
   <tr>
    <td key={key}>{mainPrice.large_car[key]}</td>
   </tr>
  ))}
</td>