React-api数据被成功地传递到组件(每个检查器)，但没有被呈现

Question

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

如果在搜索播放列表后，我进入并编辑table.js文件，数据将正确呈现。App.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组件检查器下，但未进行渲染。如果我在看到组件检查器中的数据后编辑文件，我就可以获得要呈现的数据。表.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

问题

您可能收到了正确的数据，但没有在正确的时间更新您的状态。spotlist返回您链接的Promise，但在处理Promise链的then块之前，setPlaylists(tablelist)调用已入队。useEffect回调是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 = []

解决方案-在Promise链中放置状态更新

您可以将forEach映射到一个临时数组中，但将响应数据映射到状态值更"简单"；React"；处理方式。它也更简洁。

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

Answer 2

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

也许最好研究一下以前的检查，我以前用过一个常见钩子的解决方案：如何比较React Hooks useEffect上的oldValues和newValues？

当你说播放列表道具出现时，有实际值吗？

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