将对象存储在状态时渲染中的ReactJS Fetch Type错误

Posted 2023-02-22

【中文标题】将对象存储在状态时渲染中的ReactJS Fetch Type错误

【英文标题】：ReactJS Fetch Type error in render when storing an object in state

【发布时间】：2017-10-25 08:45:42

【问题描述】：

我对反应很陌生，我正在尝试从服务器获取对象（会话）并使用表单对其进行编辑，在进行更改后，使用帖子将其存储到服务器。

我制作了一个从服务器获取数据并将其存储到状态中的组件。

问题是渲染部分给出了错误，因为它可能还不知道状态对象的子字段。我指的是“session.name”和其他几个字段，但这会产生错误。 (TypeError: this.state.session is null[Meer info])

class SessionFirstTab extends React.Component 
    constructor() 
        super();
        this.state =  
            session: null,
            statechanged: false
        ;  
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.getSessionData = this.getSessionData.bind(this)

    

    componentDidMount() 
        this.getSessionData()
    

    getSessionData() 
        var myHeaders = new Headers();
        myHeaders.append("Content-Type", 'application/x-www-form-urlencoded');
        myHeaders.append("x-access-token", 'eyJhbGciOiJIUzI1....');
        myHeaders.append("userid", "5904ab94835a710868d19fa2");
        myHeaders.append("id", this.props.sessionid);

        var myInit =  method: 'GET',
               headers: myHeaders,
               mode: 'cors',
               cache: 'default' ;


       fetch('http://localhost:3000/api/session',myInit) 
      .then(function(response)   
          if (response.status !== 200)   
            console.log('Looks like there was a problem. Status Code: ' +  
              response.status); 
            return;  
          
        //   Examine the text in the response  
         response.json().then(function(data)   
         data => this.setState(session: data);

          );  
          
      )  
      .catch(function(err)     
        console.log('Fetch Error', err);  
      );



     //////////////END getSessionInfo


    handleChange(event) 
        const target = event.target;
        const value = target.type === 'checkbox' ? target.checked : target.value;
        const name = target.name;

        this.setState( statechanged: true);
        this.setState(session: [name]: value);
    


    handleSubmit(event) 
    // console.log(this.state.session.name);
        event.preventDefault();
    



    render() 
        return (

     <article className="article">
    <h2 className="article-title">Edit Session </h2>

    <section className="box box-default">
      <div className="box-body padding-xl">

        <section className="box box-default">
          <div className="box-body no-padding">
           <Tabs>
    <Tab label="Properties" >
      <div style=styles>

       <form role="form" onSubmit=this.handleSubmit>





          <div className="divider divider-lg" />
    <div className="row">

      <div className="col-xl-6">
        <div className="box box-default">
          <div className="box-body">
            <div className="icon-box ibox-center">
              <div className="ibox-icon">
                <a href="javascript:;"><i className="material-icons">settings</i></a>
              </div>
              <h3>General</h3>
               <div className="form-group">
             <TextField name="name" id="name" hintText="Give this session a description" floatingLabelText="Name"  floatingLabelFixed defaultValue=this.state.session.name onChange=this.handleChange/><br />
          </div>

【问题讨论】：

我认为您唯一需要做的就是检查会话是否为空。或多或少： this.state.session === null ？ '没有？' : this.state.session.name。其他策略可能是，如果会话为空，则呈现一些正在加载的文本......，否则呈现你需要的东西。

【参考方案1】：

我认为您唯一需要做的就是检查会话是否为空。 我通常使用两种方法，总是取决于我的需要。

方法一：

如果有会话，则渲染 session.name，否则渲染一个空字符串。

<TextField name="name" id="name" hintText="Give this session a description" floatingLabelText="Name"  floatingLabelFixed defaultValue=this.state.session !== null ? this.state.session.name : '' onChange=this.handleChange/>

这种方式会强制您在处理程序内部进行检查。在您的情况下，您必须检查handleChange 内部以及handleSummit。 所以在我看来，你应该尝试第二种方法。

方法二：

如果你有会话，则渲染表单，否则渲染一些加载图

if(this.state.session)
  return (
    <form role="form" onSubmit=this.handleSubmit>
      ... your staff here   
    </form>
  );
 else 
  return (
    <div>
      We are waiting for the session
    </div>
  );

特别是，我不会将整个会话存储在状态中，但我会只存储我需要的属性。我的意思是，我会存储 this.state.name。只是为了语义和责任问题。为什么？我假设您的会话有很多组件不需要知道的东西，所以它不应该在那里。不过我们可以好好讨论一下。

希望对您有所帮助，如果您觉得需要澄清，请告诉我，我会提供帮助。

【讨论】：

您好法昆多，感谢您的帮助！错误消失了。现在它挂在“等待会话”上。似乎实体会话保持为空？当我记录'数据'对象时，它指出：对象_id：“5904ab26ab0104206cb6a409”，名称：“好名字”，用户ID：“5904ab94835a710868d19fa2”，会话代码：“ABCDEF”，产品类型：“产品1”，标语：“某事", searchtags: "pizza", animationspeed: 35, __v: 0, moderatorfilter: false, 3 more...亲切的问候，史蒂文

您的获取中似乎有一个 sintax 错误，删除 data => 应该可以解决问题，但无论如何，请尝试调试该承诺，以查看会话是否在该状态下正确保存。但正如你所说，问题就在那里

:) 找到了。将其更改为： fetch('localhost:3000/api/session',myInit) .then(response => response.json()) .then(json => console.log(json); this.setState( session: json, ); );页面现在可以工作了。感谢你的帮助！周末愉快！

【参考方案2】：

您只需要在会话为空时进行处理。一个简单的解决方案是：

render() 
    const session_name = this.state.session.name || '';
        return (

     <article className="article">
    <h2 className="article-title">Edit Session </h2>

    <section className="box box-default">
      <div className="box-body padding-xl">

        <section className="box box-default">
          <div className="box-body no-padding">
           <Tabs>
    <Tab label="Properties" >
      <div style=styles>

       <form role="form" onSubmit=this.handleSubmit>





          <div className="divider divider-lg" />
    <div className="row">

      <div className="col-xl-6">
        <div className="box box-default">
          <div className="box-body">
            <div className="icon-box ibox-center">
              <div className="ibox-icon">
                <a href="javascript:;"><i className="material-icons">settings</i></a>
              </div>
              <h3>General</h3>
               <div className="form-group">
             <TextField name="name" id="name" hintText="Give this session a description" floatingLabelText="Name"  floatingLabelFixed defaultValue=session_name onChange=this.handleChange/><br />
          </div>

【讨论】：

这个例子不能工作，因为 session_name 被整个会话填满了。而且，在实际实现中，处理程序执行时会出现一些问题

对不起，错字。是的，应该是this.state.session.name || ''。