JSON-объект работает взамен, но не извне

Question

Я получаю очень необычную ошибку с моим Объектом.Я пытаюсь получить значение ключа name от объекта, который выглядит следующим образом

{id: 3,

image_url: "anticon anticon-gift",

is_deleted: false,

name: "Inform Partners",

org_id: null",}

Дело в том, что у меня есть объект, поступающий из состояния в переменной, скажем, this.state.description_data itвыглядит так:

Как видите, я получаю category_id.Я хочу сопоставить это category_id из другого объекта состояния, который является

Теперь я хочу сопоставить i_got category_id из description_data с идентификатором вcategory_data и получить значение name из него и показать его в рендере.Я получаю значение, но после нескольких обновлений или выхода из страницы и возврата на нее появляется сообщение об ошибке:

Я пыталсяэтот код для получения значения

var defaultCategoryId= this.state.description_data.map(c=>{
            return c.category_id
        });
        console.log("description_data")
        console.log(this.state.description_data)
        console.log(defaultCategoryId[0])
        console.log(this.state.category_data)

        let catId= defaultCategoryId[0] -1;
        let defaultCategoryValue = this.state.category_data[catId];

        // let catValue=defaultCategoryValue.map(c=>{
        //     return c.name
        // });
        console.log(defaultCategoryValue);

упомянутый выше объект генерируется в переменной let defaultCategoryValue

Я использую defaultCategoryValue.name в методе рендеринга, который выглядит следующим образом:

return (

    <Spin spinning={this.state.loading} tip="Loading..." indicator={antIcon} delay={500} size="large">

       {this.state.cover_show===false?<div>
            {this.state.description_data.map(d=>
            <div key={d.id}>
             <Row key={d.id} style={rowStyle} gutter={gutter} justify="start" style={{marginBottom: "10px"}}>
                                <Col md={16} sm={12} xs={24} >
                                    <div className="form-element">
                                        <label className="label-class" title="">Production Name <Tooltip title="This is a name used that you can use to uniquely identify your production, making it easier for you and your contributors to find it. We recommend the name be a few words that describe the nature of the project."><Icon className="tooltip-icon" type="question-circle-o" /></Tooltip> </label>
                                        <Input className="txt-font"  name="display_app_name" id={"display_app_name-" + d.id} maxLength={70}  defaultValue={d.display_app_name} onChange={this.ontxtChange} />
                                        <span className="error-text">{this.validator.message('display_app_name', d.display_app_name, 'required|max:70', false, { default: 'This field is required.',max:'You have exceeded the maximum character limit.' })}</span>
                                        <p style={{float:"right"}}>{d.display_app_name.length}/70</p>
                                    </div>
                                    <div className="form-element">
                                        <label className="label-class" title="">Category <Tooltip title="This is where you can specify which of the options most closely aligns with the purpose of the video. If you are using a pre-built storyboard, this will have already been selected for you."><Icon className="tooltip-icon" type="question-circle-o" /></Tooltip> </label>
                                        <Select defaultValue={defaultCategoryValue.name} onChange={this.onCategoryChange} id={"category_id-" + d.id}>
                                            {categoryOptions}
                                        </Select>
                                        <span className="error-text">{this.validator.message('category_id', d.category_id, 'required', false, { default: 'This field is required.'})}</span>
                                    </div>

Вероятно, неправильный способ получения значения. Я предполагаю это, потому что если я не наберу defaultCategoryValue.name и напишу d.category_id, я не получу никакой ошибкиDefaultCategoryValue всегда восстанавливает данные независимо от того, сколько раз я обновляю. Но иногда вы видите ошибку, если вы используете ее в <Select defaultValue={defaultCategoryValue.name>, как вы можете видеть выше в коде.

Пожалуйста, помогите мне с этим, ребята.Спасибо.

Answer 1

Учитывая, что форма для this.state.description_data равна

[
   {
    //...
    category_id
    //...
   }
]

и this.state.category_data равна

[
   {
    //...
    id
    //...
   }
]

Кажется правильным преобразовать this.state.category_data из массива вобъект, ключи которого должны быть category_id.Это упростит поиск данных категории для category_id при отображении this.state.description_data

const CATEGORY_DATA = this.state.category_data.reduce(
                        (categories, category) => (
                          {...categories, [category.id]: category}
                        ), 
                        {}
                      )

Теперь this.state.description_data можно сопоставить с данными своей категории следующим образом.

this.state.description_data.map(
  (description) => (
    <div key={description.id}>
      //...
      <Select 
        defaultValue={CATEGORY_DATA[description.category_id]}
        id={"category_id-" + description.id}
        onChange={this.onCategoryChange}
      >
        {categoryOptions}
      </Select>
      //...
    </div> 
  )
)