小编Avi*_*ler的帖子

我正在完成一个教程，他们正在使用styled-component. 渲染后在 js 文件中分配样式，我收到无效的挂钩调用。这是我的第一个反应教程，所以我正在努力用谷歌搜索答案。下面是我正在运行的代码。仅当我调用时才会弹出该错误<MovieGrid>。任何帮助，将不胜感激

/* eslint react/no-did-mount-set-state: 0 */
import React, { Component } from 'react';
import styled from 'styled-components';
import Movie from './Movie';

class MoviesList extends Component {
  state = {
    movies: [],
  }

  async componentDidMount() {
    try {
      const res = await fetch('url');
      const movies = await res.json();
      this.setState({
        movies: movies.results,
      });
    } catch (e) {
      console.log(e);
    }
  }

  render() {
    return (
      <MovieGrid>
        {this.state.movies.map(movie => <Movie key={movie.id} movie={movie} />)}
      </MovieGrid>
    );
  }
} …

我正在一个 NextJS 站点上工作，该站点具有一些通过 MaterialUI 的 makeStyles 应用的自定义样式。它在第一次加载时运行良好，然后在第二次加载时撤消所有自定义工作。似乎它与路线有关，因为它唯一起作用的时间是我第一次被定向到页面本身。它发生在 2 个不同的页面上，一个是通过定向的href='/login'，另一个是通过下一个/路由器定向的router.push('/register')

我假设这与 Next 加载页面的方式有关？但我会说，这两个都是prerendered pages根据右下角的图标。

import React, {useState} from 'react';
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { login } from '../store/user/action'
import { useRouter } from 'next/router'

import TextField from '@material-ui/core/TextField';
import { makeStyles } from '@material-ui/core/styles';

const style = makeStyles({
    root: {
        marginBottom: '20px',
        textAlign: 'center'
    },
  });


function Signin({login}) {
    const [email, setEmail] = useState('');
    const [password, setPassword] …

我正在学习 React hooks，我只是尝试执行一个简单的函数来从列表中删除该项目。为此，我使用 find、indexOf 和 splice。

在 onClick 函数中，我在 array.splice(indexOf, 1) 中使用 indexOf，但它仅返回列表中的项目。所有内容都会重新渲染并执行其应该执行的操作，但唯一渲染的项目是我刚刚尝试删除的项目。我缺少什么？

const [todos, setToDo] = useState(initialToDo);
const [input, setInput] = useState('');

const todoList = (todos) => {
    return (
        todos.map((todo) => {
        return (
            <div className='todo-list flex p-2 w-1/2 justify-between'>
                <p className="px-3">{todo.name}</p>
                <button 
                    className='rounded-sm border-2 px-2'
                    onClick={(e)=>{
                        let item = todos.find(el=>el.id == todo.id);
                        console.log(item)
                        let index = todos.indexOf(item);
                        console.log(index)
                        todos = todos.splice(index, 1)
                        // todos == item
                        setToDo(todos)
                    }}    
                >-</button>
            </div>
    )}))
}