Question

我正在使用react钩子，我想显示每个来自API的function comma_value(n) -- credit http://richard.warburton.it local left,num,right = string.match(n,'^([^%d]*%d)(%d*)(.-)$') return left..(num:reverse():gsub('(%d%d%d)','%1,'):reverse())..right end。但是我遇到错误count

API返回json数据，例如：

Cannot read property 'map'

和model: { item 1: { count: 200 } item2: { count: 300 } item 3: { count: 400 } }如下：

useEffect

Answer 1

.map()是仅存在于数组中而不存在于对象中的函数。因此，对于您的情况，您可以做的是，遍历键并迭代对象。

useEffect(() => {
  fetch("api")
    .then(results => {
      return results.json();
    })
    .then(data => {
      let test = Object.keys(data.results).map((item, key) => {
        return <div key={key}>{data.results[item].count}</div>;
      });
      setResults(test);
    });
});

还有一件事，分别是useEffect和useState()，您留下了'，没有test变量。映射时，请不要忘记给出key。我已更正了您上面代码中的所有错误。

Answer 2

您可以像这样使用Object.values()和Array.map()：

const data = {
  model: {
    item1: {
      count: 200
    },
    item2: {
      count: 300
    },
    item3: {
      count: 400
    }
  }
};

console.log(Object.values(data.model).map(({
  count
}) => count));

请注意，您只想在挂载useEffect(fn,[])上获取数据，也不建议将组件本身保存为状态，根据数据进行渲染：

const App = () => {
  const [results, setResults] = useStates([]);
  useEffect(() => {
    fetch('api')
      .then(results => {
        return results.json();
      })
      .then(data => {
        setResults(Object.values(data.model).map(({ count }) => count));
      });
  }, []);

  return results.map((count,key)=> <div key={key}>{count}</div>);
};

React无法读取属性“地图”

2 个答案: