Fatal编程技术网
  • javascript/
  • Javascript 无法在react中将对象作为道具传递数组

Javascript 无法在react中将对象作为道具传递数组

javascript reactjs api react-native

Javascript 无法在react中将对象作为道具传递数组,javascript,reactjs,api,react-native,axios,Javascript,Reactjs,Api,React Native,Axios,我正在从axio get请求更新装载状态获得响应，并试图将响应传递给另一个组件 来自ChangeQuestions.js的代码： import React from 'react'; import UserService from "../../services/user.service"; import QuestionTable from './QuestionTable.js' class ChangeQuestions extends React.Component

我正在从axio get请求更新装载状态获得响应，并试图将响应传递给另一个组件

来自ChangeQuestions.js的代码：

import React from 'react';
import UserService from "../../services/user.service";
import QuestionTable from './QuestionTable.js'

class ChangeQuestions extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      operator_personal: [],
      operator_preferences: [],
      company_questions: [],
    }
  }

  componentDidMount(){
    UserService.getOperatorPersonalQuestions()
      .then(({ data }) => {
        this.setState({ operator_personal:  data });
      })
      .catch((err) => {})

    UserService.getOperatorPreferencesQuestions()
      .then(({ data }) => {
        this.setState({ operator_preferences:  data });
      })
      .catch((err) => {})

    UserService.getCompanyQuestions()
      .then(({ data }) => {
        this.setState({ company_questions: data });
      })
      .catch((err) => {})
  }
   
  render(){
    const { operator_personal, operator_preferences, company_questions } = this.state;
    return (
      <div>
        {console.log(operator_preferences)}
        <QuestionTable questions={operator_personal}/>
        <QuestionTable questions={operator_preferences}/>
        <QuestionTable questions={company_questions}/>  
        {/* <QuestionTable questions={this.state.connections}/>*/}
      </div>
    );
  }
}

从“React”导入React；
从“../../services/user.service”导入用户服务；
从“./QuestionTable.js”导入QuestionTable
类ChangeReact.Component{
建造师（道具）{
超级（道具）；
此.state={
操作员/个人：[]，
操作员_首选项：[]，
公司问题：[]，
}
}
componentDidMount（）{
UserService.getOperatorPersonalQuestions（）
。然后（{data}）=>{
this.setState（{operator_personal:data}）；
})
.catch（（err）=>{}）
UserService.getOperatorReferencesQuestions（）的
。然后（{data}）=>{
this.setState（{operator_preferences:data}）；
})
.catch（（err）=>{}）
UserService.getCompanyQuestions（）
。然后（{data}）=>{
this.setState（{company_questions:data}）；
})
.catch（（err）=>{}）
}
render（）{
const{operator\u personal，operator\u preferences，company\u questions}=this.state；
返回(
{console.log（操作员首选项）}
{/* */}
);
}
}
这是来自问题表组件的代码：

import React from 'react';
import Table from 'react-bootstrap/Table';

class QuestionTable extends React.Component{
  constructor(props){
    super(props);
    console.log(props.questions);
    this.state = {
       questions: this.props.questions,
       edit: []
    };
    this.addNewTab = this.addNewTab.bind(this);
  }

  componentDidMount(){
    this.setState(prev => ({
        edit: prev.questions.map(() => [...prev.edit, false]),
        questions: [...this.props.questions]
    }))
  }

  handleEdit = index => {
    this.setState(state => {
      const list = state.edit.map((item, j) => {
        if (j === index) {
          return !item;
        } else {
          return item;
        }
      });
      return {
        edit: list
      };
    });
  }

  handleTitleChange = index => {
    this.setState(state => {
      let temp = {
        "id": '',
        "answers": [ ],
        "typeprofile": "",
        "questiontext": ""
      };
      const list = state.questions.map((it, j) => {
        if (index == j) {
          temp.id = it.id;
          temp.answers = it.answerss;
          temp.typeprofile = it.typeprofile;
          temp.questiontext = document.getElementById(`title${index}`).value;
          return temp;
        }
        return it;
      })
      return {
        questions: list,
      };
    });
  }
  
  handleAnswersChange = index => {
    this.setState(state => {
      let temp = {
        "id": '',
        "answers": [ ],
        "typeprofile": "",
        "questiontext": "",
        "connection": 0
      };
      const string = document.getElementById(`answers${index}`).value;
      const list = state.questions.map((it, j) => {
        if (index == j) {
          temp.id = it.id;
          if (string.indexOf(',') > -1) { 
            temp.answers = string.split(',');
          }
          else temp.answers = [string];
          temp.typeprofile = it.typeprofile;
          temp.questiontext = it.questiontext;
          return temp;
        }
        return it;        
      })
      return {
        questions: list,
      };
    });
  }

  addNewTab(event) {
    event.preventDefault();
    let temp = {
      "id": '',
      "answers": [ ],
      "typeprofile": "",
      "questiontext": "",
      "connection": 0
    };

    this.setState({
      questions: [...this.state.questions, temp],
      edit: [...this.state.edit, true]
    })
  }

  handleDelete = (index) => {
    let array = [...this.state.questions]; // make a separate copy of the array
    let editNew = [...this.state.edit]; 
    if (index !== -1) {
      array.splice(index, 1);
      editNew.splice(index,1)
      this.setState({questions: array, edit: editNew});
    }
  }

  render(){
    const questions = this.state.questions;
    const newSelector = (ans) => {
      const {questions} = this.state;
      return(
        <select>
          {questions.map((it,j) => {
            const temp = ans;
            console.log(temp.length);
            for(let i = 0 ; i<temp.length;i++)
              return(
                <option key={j}>
                  {temp[j]}
                </option>
              );
            })}
         </select>
      );
    }
    return (
        <div>
           <Table striped bordered hover>
             <thead className='bgvi'>
               <tr>
                 <th>Pitanja</th>
                 <th>Odgovori</th>
                 <th>Edituj</th>
               </tr>
             </thead>                
             <tbody>
               {questions.length>=1&&(
               questions.map((item, index) => {
                 return(
                   <>
                     <tr className='even'>
                       <td key = {item.id}>
                         {this.state.edit[index]?
                         (
                           <textarea value={item.questiontext} id={`title${index}`} onChange={() => this.handleTitleChange(index)}  type="text"/>
                         ):
                         (                                            
                           <p>{item.questiontext}</p>
                         )}
                       </td>
                       <td key = {item.id}>
                         {(item.answers.length === 1 || item.answers.length === 0 ) && index===0?
                           (
                            this.state.edit[index]?
                            (
                              <textarea value={item.answers} id={`answers${index}`} onChange={() => this.handleAnswersChange(index)} type="text"/>
                            ):
                            (                                            
                              <p>{item.answers}</p>
                            )
                          ):(
                            this.state.edit[index]?
                              (
                                <textarea value={item.answers} id={`answers${index}`} onChange={() => this.handleAnswersChange(index)} type="text"/>
                                                
                              ):
                              (
                                newSelector(item.answers,index)
                              )
                            )}
                          </td>
                          <td key = {item.id}>                     
                            {this.state.edit[index]?
                              (
                                <button onClick={() => this.handleEdit(index)}>Sačuvaj</button>
                              ):
                              (
                                <button onClick={() => this.handleEdit(index)}>Edituj</button>
                              )}
                            <button onClick={() => this.handleDelete(index)}>Izbriši</button>

                          </td>
                          <button id="addNewTab" onClick={this.addNewTab}>Dodaj</button>
                        </tr>
                      </>
                    );
                  }
                )
              )
            }
          </tbody>
        </Table>
      </div>
    );
  }
}


export default QuestionTable;

从“React”导入React；
从“react引导/表格”导入表格；
类QuestionTable扩展了React.Component{
建造师（道具）{
超级（道具）；
控制台日志（道具问题）；
此.state={
问题：这个。道具。问题，
编辑：[]
};
this.addNewTab=this.addNewTab.bind（this）；
}
componentDidMount（）{
this.setState（prev=>({
编辑：prev.questions.map（（）=>[…prev.edit，false]），
问题：[……这个。道具。问题]
}))
}
handleEdit=索引=>{
this.setState（state=>{
常量列表=state.edit.map（（项，j）=>{
如果（j==索引）{
返回！项目；
}否则{
退货项目；
}
});
返回{
编辑：列表
};
});
}
handleTitleChange=索引=>{
this.setState（state=>{
设温度={
“id”：“”，
“答案”：[]，
“typeprofile”：“，
“问题文本”：”
};
const list=state.questions.map（（it，j）=>{
如果（索引==j）{
temp.id=it.id；
temp.answers=it.answers；
temp.typeprofile=it.typeprofile；
temp.questiontext=document.getElementById（`title${index}`）。值；
返回温度；
}
归还它；
})
返回{
问题:名单,，
};
});
}
handleAnswersChange=索引=>{
this.setState（state=>{
设温度={
“id”：“”，
“答案”：[]，
“typeprofile”：“，
“问题文本”：“，
“连接”：0
};
const string=document.getElementById（`answers${index}`）。value；
const list=state.questions.map（（it，j）=>{
如果（索引==j）{
temp.id=it.id；
如果（string.indexOf（'，'）>-1{
temp.answers=string.split（'，'）；
}
else temp.answers=[string]；
temp.typeprofile=it.typeprofile；
temp.questiontext=it.questiontext；
返回温度；
}
归还它；
})
返回{
问题:名单,，
};
});
}
addNewTab（事件）{
event.preventDefault（）；
设温度={
“id”：“”，
“答案”：[]，
“typeprofile”：“，
“问题文本”：“，
“连接”：0
};
这是我的国家({
问题：[…this.state.questions，temp]，
编辑：[…this.state.edit，true]
})
}
handleDelete=（索引）=>{
让数组=[…this.state.questions]；//制作数组的单独副本
让editNew=[…this.state.edit]；
如果（索引！=-1）{
阵列拼接（索引1）；
editNew.拼接（索引，1）
this.setState（{questions:array，edit:editNew}）；
}
}
render（）{
const questions=this.state.questions；
const newSelector=（ans）=>{
const{questions}=this.state；
返回(
{questions.map（（it，j）=>{
常数温度=ans；
控制台日志（温度长度）；
对于（设i=0；i=1&&(
问题。地图（（项目，索引）=>{
返回(
{this.state.edit[index]？
(
this.handleitlechange（index）}type=“text”/>
):
(                                            
{item.questiontext}

)}
{（item.answers.length==1 | | item.answers.length==0）&&index==0？
(
这个.state.edit[索引]？
(
this.handleAnswersChange（index）}type=“text”/>
):
(                                            
{item.answers}

)
):(
这个.state.edit[索引]？
(
this.handleAnswersChange（index）}type=“text”/>
):
(
新闻选择器（项目、答案、索引）
)
)}
{this.state.edit[index]？
(

componentDidUpdate(prevProps,prevState) {
  // Typical usage (don't forget to compare props):
  if (this.props.questions !== prevProps.questions) {
       let newQuestions = [...this.props.questions];
    this.setState({questions:newQuestions});
  }
}