React-api数据已成功传递给组件（每个检查器），但未呈现

Question

我的api数据正在成功地从我的api调用传递到表组件中，但是没有被呈现。

如果在搜索播放列表后，我进入并编辑表格。数据将正确呈现的js文件。应用程序。js。。。

const App = (props) => {
  const [playlists, setPlaylists] = useState([])
  const [searchString, setSearchString] = useState() //use instead of onsubmit 
  const isFirstRef = useRef(true);
  
  const search = (value) => {
    setSearchString(value)
  }

  useEffect(
    () => {
      if (isFirstRef.current) {
      isFirstRef.current = false;
      return;
      }
      let spotlist = Spotify.playlistsearch(searchString)
      let tablelist = []
      spotlist.then(val =>{
        val.forEach(element =>{
          tablelist.push(
            { 
              name: element.description,
              track_count: element.tracks.total,
            })
        } 
      )})
      setPlaylists(tablelist)
      }, [searchString] );

  return (
    <div className="App">
      <Searchform search={search}/>
      <Table playlists={playlists}/>
    </div>
  )
};

播放列表道具在PlayListTable组件检查器下显示为存在，但不呈现。如果我在看到组件检查器中存在的数据后编辑文件，我就能够得到渲染的数据。Table.js

import React from 'react'
import { Icon, Label, Menu, Table } from 'semantic-ui-react'

const PlayListTable = ({ playlists }) => {
  return(
    <Table celled>
      <Table.Header>
        <Table.Row>
          <Table.HeaderCell>Playlist</Table.HeaderCell>
          <Table.HeaderCell>Track Count</Table.HeaderCell>
        </Table.Row>
      </Table.Header>
      <Table.Body>
       {playlists.map( (playlist) => {
          return (
              <Table.Row>
                <Table.Cell>
                  {playlist.name}
                </Table.Cell>
                <Table.Cell>
                  {playlist.track_count}
                </Table.Cell>
              </Table.Row>
              )
            }
          )
        }
      </Table.Body>
      <Table.Footer>
        <Table.Row>
          <Table.HeaderCell colSpan='3'>
            <Menu floated='right' pagination>
              <Menu.Item as='a' icon>
                <Icon name='chevron left' />
              </Menu.Item>
              <Menu.Item as='a'>1</Menu.Item>
              <Menu.Item as='a'>2</Menu.Item>
              <Menu.Item as='a'>3</Menu.Item>
              <Menu.Item as='a'>4</Menu.Item>
              <Menu.Item as='a' icon>
                <Icon name='chevron right' />
              </Menu.Item>
            </Menu>
          </Table.HeaderCell>
        </Table.Row>
      </Table.Footer>
    </Table>
  )
}

export default PlayListTable

Answer 1

我要注意的第一点是，除非searchString在依赖项数组中发生更改，否则不会触发使用效果。此外，我相信您的第一个ref条件会阻止第一次渲染的设置，因此可能会导致问题。

也许最好看看以前的检查，我以前在这里使用过一个公共钩子的解决方案：如何比较React钩子useEffect上的旧值和新值？

当你说播放列表道具显示时，有实际的值吗？

在其他编辑中，确保映射的返回值具有正确的键：https://reactjs.org/docs/lists-and-keys.html

Answer 2

您可能正在接收正确的数据，但没有在正确的时间更新状态spotlist返回要从中链接的promise，但是setPlaylists（tablelist）调用在处理promise链的块之前排队。useffect回调是100%同步代码。

let spotlist = Spotify.playlistsearch(searchString);
let tablelist = [];
spotlist.then(val => { // <-- (1) then callback is placed in the event queue
  val.forEach(element => { // <-- (3) callback is processed, tablelist updated
    tablelist.push({ 
      name: element.description,
      track_count: element.tracks.total,
    });
  } 
)});
setPlaylists(tablelist); // <-- (2) state update enqueued, tablelist = []

您可以forEach将响应数据映射到临时数组中，但将响应数据映射到状态值是处理它的更“反应”的方式。它也更简洁。

Spotify.playlistsearch(searchString)
  .then(val => {
    setPlaylists(val.map(element => ({
      name: element.description,
      track_count: element.tracks.total,
    })));
  } 
)});