数据来自父组件，我们也可以在控制台中看到，但它不会在子组件中呈现相同的数据。它也没有显示任何东西

Question

父组件：

    <Tabs
      activeKey={key}
      onSelect={(k) => setKey(k)}
      className="common-tab-wrap"
    >
      {commentsData?.map((item, index) => (
        <Tab
          key={index}
          eventKey={`${item.industry}`}
          title={`${item.industry}`}
        >
          {item.industry === key && (
            <ConversionMetricsForm title={`${item.industry}`} />
          )}
        </Tab>
      ))}
    </Tabs>

子组件：

const ConversionMetricsForm = ({ title }) => {
  const { conversionMetricList } = useSelector(
    (state) => state?.conversionMetrics
  );
  const filteredData = useMemo(() => {
    const tempData = conversionMetricList?.data?.filter(
      (item) => item.industry === title
    );
    return JSON.parse(tempData[0].jsondata);
  }, [title]);

...
    <tbody>
      <tr>
        {filteredData &&
          filteredData?.map((item) => {
            <td>
              <ul className="rate-ul list-inline">
                <li className="list-inline-item">
                  <Form.Group className="num-group">
                    <Form.Control type="number" value={item.avg_CPA_GDN} />
                  </Form.Group>
                </li>
              </ul>
            </td>;
          })}
      </tr>
    </tbody>
...
};

数据来自父组件，我们也可以在控制台中看到，但它在子组件中呈现不同，并且不显示任何内容。

请指教子组件显示数据的逻辑应该写在什么地方

Answer 1

你只需要在td标签前写上return即可。

Answer 2

正如其他答案中所建议的，由于花括号语法，您需要在传递给 .map() 调用的回调函数中添加 return 语句。

          filteredData?.map((item) => {
            return (
              <td>
              ...
              </td>
            );
          })

或者，您可以使用不带花括号的语法，而是使用圆括号

          filteredData?.map((item) => (
            <td>
              ...
            </td>
          ))

影响结果的另一个问题是 useEffect 挂钩中的依赖项数组。您需要添加您在内部使用的所有变量；在这种情况下，缺少 conversionMetricList。

}, [title, conversionMetricList]);

数据来自父组件，我们也可以在控制台中看到，但它不会在子组件中呈现相同的数据。它也没有显示任何东西

Data is coming from parent component also we can see in console, but it is not render same data in child. also it is not displaying anything

javascript

tabs

reactjs

react-bootstrap