React .map 不是函数和解决方案答案

【问题标题】：React .map is not a function and solutionReact .map 不是函数和解决方案
【发布时间】：2021-06-20 09:24:20
【问题描述】：

我有一个关于 React 映射的非常基本的问题。所以我有一个这样的 JSON：

{
  "Status": true, 
  "discounts": {
    "individual": {
      "number_of_cars_discount": {
        "1": "1", 
        "10": "1", 
        "2": "0.98", 
        "3": "1", 
        "4": "1", 
        "5": "1", 
        "6": "1", 
        "7": "1", 
        "8": "1", 
        "9": "1"
      }
    }
  }
}

并且 individualPosts 是在价格系数组件中定义的：

export default function PriceCoefficient() {
  const [individualPosts, setIndividualPosts] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(false);

  useEffect(() => {
    const fetchPosts = async () => {
      try {
        if (res.status == 200) {//TODO: JSON Encode here?, full repsponse ore response.data as return?
          setIndividualPosts(res.data.discounts.individual.number_of_cars_discount);
        }
        setLoading(false);
      } catch (err) {
        setError(err.message);
        setLoading(false);
      }
    };
    fetchPosts();
  }, []);

  return (
    <>
      <PanelHeader size="sm" />
      <div className="content">
        <Row>
          <Col xs={12}>
            <Card>
              <CardHeader>
                <CardTitle tag="h4">PRICE COEFFICIENT</CardTitle>
              </CardHeader>
              <CardBody>
                <Table responsive>
                  <thead className="text-primary">
                    <tr>
                      <th>Customer Type</th>
                      <th>Discount</th>
                    </tr>
                  </thead>
                  <PricePosts
                    individualPosts={individualPosts}
                    loading={loading}
                    error={error}
                  />
                </Table>
              </CardBody>
            </Card>
          </Col>
        </Row>
      </div>
    </>
  );
}

在另一个组件中，我只是将 individualPosts 作为我想在桌子上展示的道具：

<tbody>
          <tr>
            <td>Individual</td>
            {individualPosts.map((post, index) => (
              <td key={`individual-posts-${index}`}>{post.discount}</td>
            ))}
          </tr>
        </tbody>.

我不明白为什么，但我得到了 individualPosts.map 不是一个函数，我理解它被定义为一个对象，但有解决方案吗？

谢谢

【问题讨论】：

请显示您的组件的所有内容
真的很重要吗？我定义 setIndividualPosts(res.data.discounts.individual.number_of_cars_discount);
这关系到你定义状态individualPosts和你如何称呼setIndividualPosts
希望现在更清楚，我刚刚编辑了问题
res.data.discounts.individual.number_of_cars_discount 是一个对象，但您使用individualPosts.map 就像一个arrry

标签： json reactjs dictionary object

【解决方案1】：

您只能在数组上使用 .map。 number_of_cars_discount 不是数组而是对象。如果你想遍历对象的值使用Object.values(individualPosts).map，如果你想遍历键使用Object.keys(individualPosts).map。

如果您遍历键，则可以在循环中访问键和值。

Object.keys(individualPosts).map(key => {
  console.log(key); //key
  console.log(individualPosts[key]); //value
});

【讨论】：

谢谢，但我收到了预期的赋值或函数调用，而是看到了一个表达式
这就是我尝试循环它的方式 { Object.keys(individualPosts).map((key) => { {individualPosts[key]} } ) }
您的语法有问题，您在这里没有返回任何内容。试试 { Object.keys(individualPosts).map((key) => ({individualPosts[key]} )) }
还将您对状态的初始分配设为对象。 const [individualPosts, setIndividualPosts] = useState({});