-1

我正在构建一个表，该表的状态需要在某处初始化，哪些数据最终通过 fetch 更新。

我的问题是表需要在服务器端渲染，因此在安装组件之前需要在服务器上渲染数据，我不能使用componentDidMount。

我可以使用 props 在 render() 方法中渲染表格内部，但是当表格不依赖于通过 props 接收数据而是通过调用 api 时，我以后如何更新数据？

我的结论是我必须使用状态，但是用道具初始化状​​态似乎是一个很大的不，所以我处于两难境地。

在不违反该规则的情况下，您对组件的初始化状态有何建议？

4

3 回答 3

2

这对于React Hooks和 useEffect hook 来说是一个很好的例子。根据文档：

你可以把 useEffect Hook 想象成 componentDidMount、componentDidUpdate 和 componentWillUnmount 的组合。

这是一个简单的例子，组件一开始以 prop 数据作为状态，但是一旦 API 调用完成，它就会变为 API 数据：

import React, { useState, useEffect } from "react";

function DataList(props) {
  const [users, setUsers] = useState(props.propData);
  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(res => res.json())
      .then(data => {
        setUsers(data);
      });
  });
  return (
    <ul>
      {users.map((user, index) => (
        <li key={index}>{user.name}</li>
      ))}
    </ul>
  );
}

export default DataList;
于 2019-02-25T16:34:56.860 回答
2

您可以使用道具初始化状​​态。不会有任何问题。

我的方法是：

  • 保留一个状态变量并使用道具对其进行初始化以在服务器端呈现它。
  • 由于组件安装在客户端，API 将在 componentDidMount 中调用。
  • 任何新的 props 更改都将在 componentWillReceiveProps 或静态 getDerivedStateFromProps 中进行监控（取决于您的反应版本）。如果有任何新数据出现，请更新 redux-store（如果您正在使用 redux-store）或更新组件状态以导致重新渲染以显示更新的数据。

样板样板：

class Component1 extends React.Component{
  constructor(props) {
    super(props)
    this.state = {
      tableData: props.tableData
    }
  }

  componentDidMount() {
    //Make API call here
    callAPItoGetData()
  }

  componentWillReceiveProps(nextProps) {
    const { tableData } =  nextProps
    if(tableData !== this.state.tableData ) { 
      //You need to make sure that this condition is fullfiled only once to avoid setting state multiple times
      this.setState({
        tableData: nextProps.tableData
      })
      //Alternatively, an action can be dispatched to update the redux-store which will update the props and cause re-render with new data
    }
  }

  render() {
    return (
      <div>{/*render table here*/}</div>
    )
  }
}

希望能帮助到你。恢复任何疑问/困惑。

于 2019-02-25T15:23:47.803 回答
1

我的看法：让你的组件通过使用默认值初始化状态来挂载一个空表，并向你的组件添加一个函数，该函数从你说的数据应该来自哪里获取。当发生对您的应用有意义的事件时，调用此函数。

让我知道这是否行不通以及为什么行不通，以及您遇到的其他问题。

于 2019-02-22T19:10:04.047 回答