Javascript 不确定如何在浏览器中呈现useEffect的结果

以下是useEffect在控制台日志中返回的数据：

{
    "sql": {
        "external": false,
        "sql": [
            "SELECT\n      date_trunc('day', (\"line_items\".created_at::timestamptz AT TIME ZONE 'UTC')) \"line_items__created_at_day\", count(\"line_items\".id) \"line_items__count\"\n    FROM\n      public.line_items AS \"line_items\"\n  GROUP BY 1 ORDER BY 1 ASC LIMIT 10000",
            []
        ],
        "timeDimensionAlias": "line_items__created_at_day",
        "timeDimensionField": "LineItems.createdAt",
        "order": {
            "LineItems.createdAt": "asc"
        }

我希望能够在我的react应用程序中呈现上述内容

const ChartRenderer = ({ vizState }) => {

  let ur = encodeURIComponent(JSON.stringify(vizState.query));
  let u = "http://localhost:4000/cubejs-api/v1/sql?query=" + ur;
  console.log(u)
  useEffect(() => {
      if(u !=="http://localhost:4000/cubejs-api/v1/sql?query=undefined") {
                        fetch(u)
          .then(response => (response.json()))
          .then(data => console.log(JSON.stringify(data, null, 4)))
        }},[u]);
  const { query, chartType, pivotConfig } = vizState;
  const component = TypeToMemoChartComponent[chartType];
  const renderProps = useCubeQuery(query);
  return component && renderChart(component)({ ...renderProps, pivotConfig })
}; 

---

您必须使用状态变量来持久化数据，并在API返回某些数据时更新它。在功能组件中，可以使用

useState

hook来实现此目的

const ChartRenderer = ({ vizState }) => {
    // useState takes in an initial state value, you can keep it {} or null as per your use-case.
    const [response, setResponse] = useState({});
    let ur = encodeURIComponent(JSON.stringify(vizState.query));
    let u = "http://localhost:4000/cubejs-api/v1/sql?query=" + ur;
    console.log(u)

    useEffect(() => {
        if(u !=="http://localhost:4000/cubejs-api/v1/sql?query=undefined") {
            fetch(u)
                .then(response => (response.json()))
                .then(data => {
                    // You can modify the data here before setting it to state.
                    setResponse(data);
                })
    }},[u]);

    // Use 'response' here or pass it to renderChart

    const { query, chartType, pivotConfig } = vizState;
    const component = TypeToMemoChartComponent[chartType];
    const renderProps = useCubeQuery(query);

    return component && renderChart(component)({ ...renderProps, pivotConfig })
};

---

您可以在官方文档中阅读有关

useState

的更多信息。

您应该在

useffect

中设置状态。您不应该将正则变量

u

传递给

useffect

。您应该传递希望

useffect

监视的状态。无法监视常规变量的更改感谢您的响应！这在应用程序中起作用！现在，我在呈现“response”时遇到问题……应用程序不允许我这样呈现：“return component&&renderChart（component）（{……renderProps，pivotConfig}）和&

{JSON.stringify（response.sql，null，2）}

；”以这种方式实现它会隐藏“组件”和“renderChart”，仅显示“响应”。还有什么方法可以在应用程序中显示“响应”呢？如果您希望同时显示图表和响应，请将它们都包含在

div

标记中。您的操作方式将始终显示最后一个真值或null，这是表达式大小写中的响应。更新后的代码可能如下所示：

{renderChart（component）（{…renderProps，pivotConfig}}
{JSON.stringify（response.sql，null，2）}