Question

React 无法读取属性‘map’

2020-02-05

84

reactjs react-hooks

我正在使用 React Hooks，我想显示来自 API 的每个 count 。但我收到错误 无法读取属性“map”

API 返回 json 数据，如：

model: {
  item 1: {
    count: 200
  }
  item2: {
    count: 300
  }
  item 3: {
    count: 400
  }
}

并且 useEffect 看起来像：

const [results, setResults] = useStates();

 useEffects(() => {
fetch('api)
.then(results =>{
    return results.json();
}).then(data => {
    let test = data.results.map((item) => {
        return(
            <div>{test.count}</div>
        );
    });
    setResults(test);
});
});

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>);
};