Object.entries 不会导致呈现，尽管已填充数据

Question

我想做的是渲染对应于每个索引的字典的内容，稍后我将不得不修改（键和值）。因此，我有以下词典。

{0: {a: 'b'}
1: {c: 'd'}
2: {e: 'f'}

我想要的是在 React.Fragment 内渲染它。尽管填充了 indexed_data（上面的字典），但出于某种原因，我的组件中没有呈现任何内容。我尝试使用 Object.keys 或 Object.values 更改我返回键和对象的方式，但没有任何效果。谁能帮我弄清楚发生了什么事？非常感谢！

let i = 0;
let indexed_data = {};
const { state } = useLocation();

  useEffect(() => {
    for (let [key, value] of Object.entries(state)) {
      let object = {};
      object[key] = value;
      indexed_data[i] = object;
      i += 1;
    }
  }, []);

 return Object.entries(indexed_data).map((elem, index) => {
    return Object.entries(elem).map((number, product) => {
      <div>
        <React.Fragment>
          {
            <div className="column">
              <EditText name="item" defaultValue={product} />
            </div>
          }
        </React.Fragment>
      </div>;
    });
  });

Answer 1

好的。所以让我们稍微改变一下。

有一个对象数组（我已将 keys/values 切换为此示例的更多信息）：

const arr = [{name: 'Bob'}, {name: 'Sue'}, {name: 'Rita'}];

有两种状态：第一种是原始数据（以防你需要在某些时候恢复到它）；第二个是过滤后的数据。

然后您可以 map 在过滤后的数组上生成您的 JSX。

我无法复制您代码中的所有内容，但这个示例应该有助于消除一些误解。

const { useState } = React;

// Pass in the data
function Example({ arr }) {

  // Initialise your states
  const [ data, setData ] = useState(arr);
  const [ filtered, setFiltered ] = useState(arr);

  // `getItems` gets the filtered array as an argument
  function getItems(filtered) {

    // `map` returns a new array
    return filtered.map((item, i) => {

      // For each object we grab the key/value from the first
      // element of its `Object.entries` (an array)
      const [key, value] = Object.entries(item)[0];

      // And return some JSX
      // Note that we're using the `map` index to add
      // both a key, and a data attribute to both the list
      // item, and the button. We'll use that id when we
      // remove the item.
      return (
        <li key={i} data-id={i}>
        {key}: {value}
        <button data-id={i} onClick={deleteItem}>Delete</button>
        </li>
      );

    });

  }

  // When we click on a button we use the id (coerced from a data
  // attribute string to a number) then filter out
  // all the objects where the id doesn't match the filter index
  // And then we reset the filtered state with that new array
  function deleteItem(e) {
    const { dataset: { id } } = e.target;
    const a = filtered.filter((item, i) => Number(id) !== i);
    setFiltered(a);
  }

  // Resets the data
  function reset() {
    setFiltered(data);
  }

  // Now we just call `getItems` with the
  // filtered state as an argument
  return (
    <div> 
      <ul>{getItems(filtered)}</ul>
      <button onClick={reset}>Reset</button>
    </div>
  );

}

const arr = [{name: 'Bob'}, {name: 'Sue'}, {name: 'Rita'}];

ReactDOM.render(
  <Example arr={arr} />,
  document.getElementById('react')
);

button { margin-left: 1em; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Object.entries 不会导致呈现，尽管已填充数据

Object.entries does not cause rendering, although data is populated

javascript

frontend

reactjs