New to Reactjs, I have followed a tut or 2 to build a relatively simple app, that sends queries to Mongodb and renders the results. Although I am yet to render them. I can pass the find() through and get back results that I like, and log them to the console, but for the life of me I cannot figure out how to get the results into "state", or anywhere else in the app. It's likely a very simple mistake somewhere. But I don't have enough knowledge of react to figure it out.

Here is the (small) App.js file in it's entirety, I thought it easier than trying to pick through it and make a valid sample.

// /client/App.js
import React, { Component } from 'react';
import axios from 'axios';
import * as PropTypes from "prop-types";
import {useEffect, useState} from "react";

function View(props) {
  return null;
}

View.propTypes = {children: PropTypes.node};

function Text(props) {
  return null;
}

function MyForm() {
  const [user_search, setName] = useState("");

  const handleSubmit = async (event) => {
    event.preventDefault();

    console.log(`The Search you entered was: ${user_search}`);


    let felcher = user_search.split(/[ ,] /);
    let search_obj = {}
    for (let i in felcher) {
      search_obj[i] = felcher[i]

    }
    axios.post('http://localhost:3001/api/searchData', {
      search_obj
      }
    ).then(resp => {
      console.log("RESPONSE FROM POST", resp['data'])

    });

  }

  return (
      <form onSubmit={handleSubmit}>
        <label>Enter Search Terms:
          <input
              type="text"
              value={user_search}
              onChange={(e) => setName(e.target.value)}
          />
        </label>
        <input type="submit" />
      </form>

  )
}

let formatter = new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'USD',})

Text.propTypes = {children: PropTypes.node};


class App extends Component {
  // initialize our state
  state = {
    data: [],
    _id: 0,
    ticker: '',
    primary_share: [],
    title: null,
    document_date: null,
    release_date: null,
    search_text: null,
    url: null,
    result_state: null,

  };

  componentDidMount() {
    this.getDataFromDb();
    if (!this.state.intervalIsSet) {
      let interval = setInterval(this.getDataFromDb, 1000);
      this.setState({ intervalIsSet: interval });
    }
  }

  componentWillUnmount() {
    if (this.state.intervalIsSet) {
      clearInterval(this.state.intervalIsSet);
      this.setState({ intervalIsSet: null });
    }
  }

  getDataFromDb = () => {
    fetch('http://localhost:3001/api/getData')
      .then((data) => data.json())
      .then((res) => this.setState({ data: res.data }));
  };


  render() {
    const { data } = this.state;
    return (
      <div>
        <MyForm />
        <div class={"row"}>
        <div class={"col-4"}>
        {/*<ul>*/}
        {/*  {data.length <= 0*/}
        {/*    ? 'Getting Results......'*/}
        {/*    : data.map((dat) => (*/}
        {/*        <li  style={{ padding: '10px' }} key={dat._id}>*/}
        {/*          <span style={{ color: 'gray' }}> Ticker: </span> {dat.ticker} <br />*/}
        {/*          <span style={{ color: 'gray' }}> Release Date: </span> {dat.release_date} <br />*/}
        {/*          <span style={{ color: 'gray' }}> Document Title: </span>{dat.title} <br />*/}
        {/*          <span style={{ color: 'gray' }}> Document URL: </span>{dat.url} <br />*/}
        {/*        </li>*/}
        {/*      ))}*/}
        {/*</ul>*/}

        </div>
        </div>
      </div>
    );

  }
}

export default App;

The area I am struggling with is where print the results to the console here ...

console.log("RESPONSE FROM POST", resp['data'])

In the "MyForm()" function. I feel if I could setState() there, but it appears to not work.

But I can't do anything else that gets them over to render. HELP!!!!

CodePudding user response：

SetState is a hook that returns two items: the state and setter (or the function to set the state). In your case you will have a setState at the top of your function:

const [data, setData] = useState([]) // what ever you put as an argument will be the default data until it is set
const [err, setErr] = useState(null) // this will be our error state

In your axios request you will use:

axios
    .post('http://localhost:3001/api/searchData', { search_obj })
    .then(resp => {
        setData(resp['data']) // see here we call the state function
    })
    .catch(err => {
        setErr(err) // and here for our error
    })

Then in our return we can use the data any way we like:

return (
  <>
      <div>{data}</data>
      <div>{err ? err : 'no errors'}</div>
  </>
)

Does that make sense? (Code not tested)