Question

在 React 中渲染数据数组

2022-07-01

114

javascript reactjs

我正尝试将一些经过过滤的 xml 数据渲染到网页中。数据位于数组中，如下图所示。

这是我目前的代码，但我很迷茫。我尝试了许多不同的变化，但它们似乎都导致：

要么不向网页渲染任何内容
错误指出 resValue“不能用作子项”或类似内容。

目前，此代码没有出现任何错误 - 它只是没有渲染数组。

我对 React 和 Web 开发还很陌生。

任何帮助都将不胜感激。谢谢。

export default function Home() {
  // State to store value from the input field
  const [resValue, setResVal] = useState("");

  // Input Field handler
  function handleRes(event) {
    setResVal((resValue) => event);
    console.log(resValue);
    return (
      <div>
        <ul>
          {resValue.map((item) => {
            return <li>{item}</li>;
          })}
        </ul>
      </div>
    );
  }

  // State to store value from the input field
  const [inputValue, setInputValue] = useState("");

  // Input Field handler
  const handleUserInput = (e) => {
    setInputValue(e.target.value);
  };

  // Reset Input Field handler
  const resetInputField = () => {
    setInputValue("");
  };

  return (
    <>
      <div className="InsideContent">
        <Input
          className="input1"
          placeholder="Paste PoB Code"
          name="pobCode"
          value={inputValue}
          onChange={handleUserInput}
        />
      </div>

      <div className="InsideContent">
        <Button1 onClick={() => handleRes(loadPoBXml(inputValue))}>
          Confirm
        </Button1>
        <Button2 onClick={resetInputField}>Reset</Button2>
      </div>
    </>
  );
}

编辑： Phil 说要正确修复这个问题，我需要使我的 loadPoBData 方法同步。所以在这里我也添加了我的 decryptPoBString 方法。

function loadPoBXml(str) {
var res = decodePoBString(str)
var xml = new XMLParser().parseFromString(res);   
let gem = (xml.getElementsByTagName('Gem'));
let item = (xml.getElementsByTagName('Item'))
return gem}

function decodePoBString(str) {
return inflateSync(new Buffer(str, "base64")).toString()

Answer 1

主要问题是您尝试在事件处理程序的返回值中呈现某些内容。这不会起作用，因为任何返回值都会被忽略/丢弃。

渲染应在组件的返回值中完成。假设 loadPoBXml() 是同步的，您需要做的就是让它设置您的 resValue 状态并在 JSX 中映射它。

export default function Home() {
  // If resValue is meant to be an array, initialise it as one
  const [resValue, setResVal] = useState([]);
  const [inputValue, setInputValue] = useState("");

  // Confirm button click handler
  const handleClick = () => {
    setResVal(loadPoBXml(inputValue));
  };

  // Input Field handler
  const handleUserInput = (e) => {
    setInputValue(e.target.value);
  };

  // Reset Input Field handler
  const resetInputField = () => {
    setInputValue("");
  };

  return (
    <>
      <div className="InsideContent">
        <Input
          className="input1"
          placeholder="Paste PoB Code"
          name="pobCode"
          value={inputValue}
          onChange={handleUserInput}
        />
      </div>

      {/* assuming you want to render resValue here */}
      {resValue.length > 0 && (
        <div>
          <ul>
            {resValue.map((item, i) => (
              <li key={`item${i}`}>{item.name}</li>
            ))}
          </ul>
        </div>
      )}

      <div className="InsideContent">
        <Button1 onClick={handleClick}>Confirm</Button1>
        <Button2 onClick={resetInputField}>Reset</Button2>
      </div>
    </>
  );
}