如何在 React 中使用 .splice() 属性？

Question

我是 Reactjs 的新手，在本例中，我试图显示一个操作列表。我只需要显示列表的最后 10 个操作，我正在尝试使用数组上的 .splice() 来做到这一点。我尝试了很多，但无法让它发挥作用。我收到以下错误：

TypeError: list is not iterable.

知道怎么做吗？

到目前为止，这是我的组件代码：

export default function ListOperations() {
  const dispatch = useDispatch();
  // const list = useSelector((state) => state.operations);
  const [list, setList] = React.useState({});

  React.useEffect(async () => {
    try {
      const response = await axios.get("http://localhost:3000/operation");

      dispatch({
        type: "LIST_OPERATIONS",
        list: response.data,
      });
    } catch (e) {
      swal("Error", e.message, "error");
    }
  }, []);

  const currentListCopy = [...list];

  if (currentListCopy >= 10) {
    currentListCopy.splice(10);
    setList(currentListCopy);
  }

  return (
    <div>
      <div>
        <h2>OPERATIONS HISTORY:</h2>
      </div>
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>Reason</th>
            <th>Amount</th>
            <th>Date</th>
            <th>Type</th>
          </tr>
        </thead>
        <tbody>
          {list.map((oneOperation) =>
            oneOperation ? (
              <tr key={oneOperation.id}>
                <td>{oneOperation.id}</td>
                <td>{oneOperation.reason}</td>
                <td>{oneOperation.amount}</td>
                <td>{oneOperation.date}</td>
                <td>{oneOperation.type}</td>
              </tr>
            ) : null
          )}
        </tbody>
      </table>
    </div>
  );
}

UPDATED VERSION:

export default function ListOperations(){
    const dispatch = useDispatch();
    const storeList = useSelector((state) => state.operations);
    const [list, setList] = React.useState([]);

    React.useEffect(async () => {
        try{
            const response = await axios.get('http://localhost:3000/operation');

            dispatch({
                type: 'LIST_OPERATIONS',
                list: response.data
            })

            if(Array.isArray(storeList) && storeList.length){
                const currentListCopy = [...storeList];
                if(currentListCopy.length >= 10){
                    currentListCopy.splice(10);
                    setList(currentListCopy);
                }
            }
        }
        catch(e){
            swal("Error", e.message, "error");
        }
    }, [storeList]);

Answer 1

if(currentListCopy >= 10){
    currentListCopy.splice(10);
    setList(currentListCopy)
}

您缺少“长度”：

if(currentListCopy.length >= 10){
    currentListCopy.splice(10);
    setList(currentListCopy)
}

另外，你不应该在 useEffect 中使用 promise https://dev.to/danialdezfouli/what-s-wrong-with-the-async-function-in-useeffect-4jne

Answer 2

有几个问题导致了错误，而且，如果错误得到修复，获取的结果将不会显示在应用程序中。

第 1 期

const [list, setList] = React.useState({});

在上面的代码中，您将状态初始化为一个对象，这导致了错误 list is not iterable，在下面的代码中，当您尝试使用运算符时创建一个 state object.

的数组

const currentListCopy = [...list];

修复

您可以通过将 list 状态初始化为空数组来解决此问题。

const [list, setList] = React.useState({});

第 2 期

第二个问题是您在 useEffect 挂钩中调度一个操作，但没有从商店获取更新状态，因为这一行 // const list = useSelector((state) => state.operations); 被注释掉了。由于您既没有从存储中获取任何状态，也没有更新本地状态 list，您将看不到 map 函数的任何变化，因为它是空的，即使一些数据是从网络中返回的API呼唤。

修复

如果您希望使用商店中的状态来更新本地商店，那么您必须取消注释此行 // const list = useSelector((state) => state.operations) 并将列表重命名为其他名称。

您还需要将 splice 代码移动到 useEffect 挂钩，因此，每当 list 在全局状态中更新时，您的本地状态也会相应更新。

React.useEffect(() => {
    if (Array.isArray(list) && list.length) { // assuming list is the global state and we need to ensure the list is valid array with some indexes in it.
      const currentListCopy = [...list];
      if(currentListCopy.length >= 10) { // as above answer point out
        currentListCopy.splice(10);
        setList(currentListCopy)
      }
    }
 }, [list]); // added list as a dependency to run the hook on any change in the list

此外，正如上面指出的，您应该避免 useEffect.

中的异步函数

更新

完整代码

export default function ListOperations() {
  const dispatch = useDispatch();
  const storeList = useSelector((state) => state.operations);
  const [list, setList] = React.useState([]);

  React.useEffect(async () => {
    try {
      const response = await axios.get("http://localhost:3000/operation");

      dispatch({
        type: "LIST_OPERATIONS",
        list: response.data,
      });
    } catch (e) {
      swal("Error", e.message, "error");
    }
  }, []);

  React.useEffect(() => {
    if (Array.isArray(storeList) && storeList.length) {
      const currentListCopy = [...storeList];
      if(currentListCopy.length >= 10) {
        currentListCopy.splice(10);
        setList(currentListCopy)
      }
    }
 }, [storeList]);

  return (
    <div>
      <div>
        <h2>OPERATIONS HISTORY:</h2>
      </div>
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>Reason</th>
            <th>Amount</th>
            <th>Date</th>
            <th>Type</th>
          </tr>
        </thead>
        <tbody>
          {list.map((oneOperation) =>
            oneOperation ? (
              <tr key={oneOperation.id}>
                <td>{oneOperation.id}</td>
                <td>{oneOperation.reason}</td>
                <td>{oneOperation.amount}</td>
                <td>{oneOperation.date}</td>
                <td>{oneOperation.type}</td>
              </tr>
            ) : null
          )}
        </tbody>
      </table>
    </div>
  );
}

如何在 React 中使用 .splice() 属性？

How to use .splice() property at React?

arrays

splice

reactjs