在 axios 的两个不同“列”中呈现 JSON 数组

Question

我对 axios 和 react 很陌生。

我的目标是将数组的一半呈现在一列中，另一半呈现在第二列中。所以我可以分别设置每一列的样式。

我有一个 JSON 对象数组，我想将它们呈现到列中，例如 这个：

OmOss.js

const OmOss = () => {
  return (
    <ContentContainer>
      <Column>
        <Element></Element>
      </Column>
      <Column>
        <Element></Element>
      </Column>
    </ContentContainer>
  );
};

这是我对 axios 的 get 请求，它将数组中的所有对象作为单个组件返回。 但我不知道如何分离每个对象并单独渲染它们。

Element.js

export function Element() {
  const url = "http://localhost:1337/om-osses";
  const [result, setResult] = useState(null);
  const [isLoading, setLoading] = useState(true);

  useEffect(() => {
    axios.get(url).then((response) => {
      setResult(response.data);
      setLoading(false);
    });
  }, []);

  if (isLoading) {
    return (
      <ContentContainer>
        <div> Loading... </div>
      </ContentContainer>
    );
  }

  return (
    <TextContainer>
      {result.map((text) => (
        <div>
          <Title text={text.Title} fontSize="2.3rem"></Title>
          <p>{text.Content}</p>
        </div>
      ))}
    </TextContainer>
  );
}

这是我尝试过的。

• 我尝试过像这样推送到数组

let data= [];
  useEffect(() => {
    axios.get(url).then((response) => {
      setResult(response.data);
      setLoading(false);
    });
    data.push(response.data);
  }, []);

并像这样访问它：

<Title text={array[0].title} fontSize="2.3rem"></Title>

尽管 axios 请求成功通过，但数组元素未定义。

Answer 1

因为您想将数组分成两半并将其传递给Element 组件。

将状态移动到父组件（OmOss.js）并获取数组

找到像Math.floor(array.length/2)这样的中间索引并使用这个中间索引将数组分成两半

使用array.slice(0, middleIndex) 和array.slice(middleIndex) 可以找到两半

将这些数组作为道具传递给Element 组件

映射数组并显示内容

Answer 2

你这里有问题。

**let data= []**;
  useEffect(() => {
    axios.get(url).then((response) => {
      setResult(response.data);
      setLoading(false);
    });
    **data.push(response.data)**; // Response is undefined at this moment
  }, []);

首先，您将 data 声明为局部变量，并且每当再次渲染组件时，它将被擦除为 []。

第二，你在没有响应的情况下推送数据。

要做你想做的，你必须将数据声明为状态并使用setter来使用它。

const [data, setData] = useState([])

useEffect(() => {
    axios.get(url).then((response) => {
      let newData = data;
      newData.push(response.data);
      setData(newData);
      setLoading(false);
    });
  }, []);

我不确定你真正想要什么，但你可以这样尝试。