невозможно установить данные из внутреннего интерфейса React. js - PullRequest
Новая
       4

невозможно установить данные из внутреннего интерфейса React. js

0 голосов
/ 10 марта 2020

Это из внутреннего формата данных: enter image description here

{data: Array (15)} 

 data[0]:

        option: Array(1)

                           0: "String"

        _id: "String"

        col1: "String"

        col2: "String"

        col3: "String"

... .data [14]

и это код внешнего интерфейса: 

 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;

Как я могу установить этот вложенный объект json в это значение dbvalue? Я хочу использовать dbvalue.keyname для отображения. Спасибо за вашу помощь

Ответы [ 2 ]

0 голосов
/ 10 марта 2020

Чтобы отобразить JavaScript объектов в вашем jsx, вы можете сделать следующее: 

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

Если ваши data [x] .option - это объект, где каждое свойство является строкой затем вы можете сделать следующее, чтобы перечислить их: 

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} />
0 голосов
/ 10 марта 2020

Во-первых, ваш console.log печатает ноль, потому что когда вы используете setState, переменная, которую вы только что установили, будет установлена ​​только при следующем рендере. Вместо этого попробуйте напечатать resp.data.data, а затем поставьте console.log(dbvalue) вне функции getAlldbValue, чтобы вы могли лучше понять.

Также 

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

ваша попытка поместить объект в HTML Элемент, попробуйте dbvalue[0].col1 или все, что вы хотите показать вместо этого.

Надеюсь, это поможет вам.

...