can not set data from back end use React.js

Question

This is from back-end data format:

{data: Array(15)}

 data[0]:

        option: Array(1)

                           0: "String"

        _id: "String"

        col1: "String"

        col2: "String"

        col3: "String"

....data[14]

and this is front end code:

 const Component1 = () => {
    const [dbvalue, setDbvalue] = useState(null)

    //option, _id, col1, col2, col3
    const getAlldbValue = async () => {
        try {
            const resp = await services.getAlldbValue();
            console.log(resp) //enter F12 can get total data from back end. 
            setDbvalue(resp.data.data) 
            console.log(dbvalue) //setDbvalue() not work , this print null 
        } catch (error) {
            console.log(error)
            alert('Failed!')
        }
    }

    useEffect(() => {
        getAlldbValue()
      }, [])

      if(!dbvalue) {
        return (
              <p>Loading Component...</p> //not appear
        )
      }
    return (
        <p>{dbvalue}</p> //not appear
    );
};

export default Component1;

How can I set this nested object json into this dbvalue? I want use dbvalue.keyname to display. Thanks for your help

no keyname in image or text that you posted in your question. And your log is not working because you are logging a stale closue. Log it just before you return jsx and you'll get the right value when it renders again. — HMR, Mar 10 '20 at 13:29
Move your console log out of that function and put it into the component itself. State updates are async, it will not be updated by the time you try to log it there. Catch it on the next render. The second problem is you're trying to render the array of objects directly; this will break. — Brian Thompson, Mar 10 '20 at 13:29
Does this answer your question? [useState set method not reflecting change immediately](https://stackoverflow.com/questions/54069253/usestate-set-method-not-reflecting-change-immediately) — Brian Thompson, Mar 10 '20 at 13:29
@Brian Thompson I already use **useEffect** but this still doesn't work — Creek, Mar 10 '20 at 13:38

score 0 · Answer 1 · answered Mar 10 '20 at 13:34

First, your console.log is printing null because when you use setState, the variable you just setted will only be setted in the next render. Try printing resp.data.data instead and then put console.log(dbvalue) outside the getAlldbValue function, so you can understand better.

Also,

`return (
    <p>{dbvalue}</p> //not appear
);`

your trying to put an object into a HTML Element, try dbvalue[0].col1 or whatever you want to show instead.

Hope it helps you.

HMR · Accepted Answer · 2020-03-10T13:43:08.427

0

To display JavaScript objects in your jsx you can do the following:

<pre>{JSON.stringify(dbvalue,undefined,2)}</pre>

If your data[x].option is an object where every property is a string then you can do the following to list them:

const ListProps = props => (
  <ul>
    {Object.entries(props).map(([key, value]) => (
      <li key={key}>{value}</li>
    ))}
  </ul>
)
//here is how you would render listProps
<listProps {...data[0].option} />

edited Mar 10 '20 at 13:43

answered Mar 10 '20 at 13:36

HMR

37,593
24
91
160

Thanks for your help. This work for me. But data from back end already have json format [res.json()]. Why use JSON.stringify instead of use JSON.parse? – Creek Mar 11 '20 at 05:39
@Creek The jsx: `
```
{JSON.stringify(dbvalue,undefined,2)}
```
` will dump the data object in the UI so you can see what data you have, you can also console.log it in this way and then copy and paste it in your question next time instead of a print screen that doesn't show most of what the data is.
– HMR Mar 11 '20 at 07:56

can not set data from back end use React.js

2 Answers2