Объекты недопустимы как дочерние элементы React. Если вы намеревались визуализировать коллекцию дочерних элементов, вместо этого используйте массив - PullRequest
Новая
       33

Объекты недопустимы как дочерние элементы React. Если вы намеревались визуализировать коллекцию дочерних элементов, вместо этого используйте массив

0 голосов
/ 18 апреля 2020

Я разрабатываю систему проверки документов с ReactJS и надежностью - умный контракт. Я хочу отобразить результат метода get().call() моего умного контракта во внешнем интерфейсе с всплывающим окном или даже с простым текстом. Проблема, с которой я сейчас сталкиваюсь, заключается в том, что когда я пытаюсь отобразить ответ метода, он выдает мне такую ​​ошибку:

Объекты недопустимы как дочерние элементы React. Если вы намеревались визуализировать коллекцию дочерних элементов, используйте вместо этого массив

Вот код моего договора о солидности: 

pragma solidity ^0.5.0;
contract Proof1 {
  struct FileDetails {
    uint256 timestamp;
    string owner;
  }
  mapping(string => FileDetails) files;
  event logFileAddedStatus(
    bool status,
    uint256 timestamp,
    string owner,
    string fileHash
);

function set(string memory owner, string memory fileHash) public {
  if (files[fileHash].timestamp == 0) {
    files[fileHash] = FileDetails(block.timestamp, owner);

    emit logFileAddedStatus(true, block.timestamp, owner, fileHash);
  } else {
    emit logFileAddedStatus(false, block.timestamp, owner, fileHash);
  }
}

function get(string memory fileHash)
public
view
returns (uint256 timestamp, string memory owner)
{
  return (files[fileHash].timestamp, files[fileHash].owner);
}}

Вот метод .get().call() внутри метода onClick : 

onSubmitGet = async (event) => {
  event.preventDefault();
  const hash = document.getElementById("hash").value;

  this.state.design = await this.state.contract.methods
    .get(hash)
    .call({ from: this.state.address })
    .then((res) => this.setState({ result: res }));
};

И вот как я отображаю результат с React: 

const { result } = this.state;

<div>{result}</div>

enter image description here

1 Ответ

0 голосов
/ 18 апреля 2020

Я не знаю, почему вы пишете следующий код: 

this.state.design = await this.state.contract.methods

ReactJS не имеет two-way-data-binding, ReactJS не похоже на VueJS или Angular , для изменения состояния вы должны использовать this.setState или useState. this.state.design = никогда не изменяет ничего из состояний.

Теперь к вашему вопросу. установите начальное состояние для результата, как показано ниже: 

this.state = {
  result: undefined,
};

Затем в JSX напишите его, как показано ниже: 

const { result } = this.state;

<div>
  {result && result.map((item, index) => (
    <div key={item.uniqueThing}>{item.title}</div>
  ))}
</div>

На самом деле, вам не нужно index, я просто хочу знать, что вы можете иметь это. даже вы можете написать это лучше: 

const { result } = this.state;

<div>
  {result && result.map(({ title, uniqueThing }) => (
    <div key={uniqueThing}>{title}</div>
  ))}
</div>

Примечание: вам определенно следует передать key первому элементу JSX возврата функции обратного вызова карты, и он должен быть уникальным, пожалуйста, не используйте index он имеет плохую стоимость для ReactJS, чтобы справиться с этим, может иногда попадать в плохие ошибки.

...