小编dan*_*boy的帖子

我正在使用“Redux Toolkit Query”并遇到这样的情况：我有一个地点 id 数组，并且想要返回一个检索到的地点数组。但是，根据我当前的设置，我只能查询单个位置，而不能查询整个已编译的位置列表。

我调用查询的挂钩：

function ShowPlaceList() {
  const placeIDs = [1, 2, 3, 4, 5];

  const { data, isFetching, isLoading } = useGetPlaceByIdQuery({
    placeID: placeIDs,
  });

  // data should be an array 
  return (
    <div>
      {data.map(function (item, i) {
        return <ShowPlace {...item} />;
      })}
    </div>
  );
} 

简化切片：

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'


export const placeApi = createApi({
  reducerPath: 'placeApi',
  baseQuery: fetchBaseQuery({ baseUrl: 'https://providePlace.co/api/v2/' }),
  endpoints: (builder) => ({
    getGetPlaceById: builder.query({
      query: ({placeID}) => `place/${placeID}`,
    }), …

几天来我一直在尝试通过 django drf 发布一个包含一个文件和一些数据的嵌套对象。目标是与一些图像一起创建一个故事，其中一张图像是故事的标题图像。基本上，我能够用邮递员成功发布故事（见下图）。但是，当我使用 React js 前端进行发送时，我无法以 Django 理解的方式创建表单数据。Django 总是返回错误story_media field is required。我想这是因为 Django 无法正确理解传入的数据。

class Story (models.Model):
    title = models.CharField(max_length=100,blank=True)
    author = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.CASCADE, null=True)

class Story_Media (models.Model):
    story = models.ForeignKey(Story,on_delete=models.CASCADE, null=True, related_name = 'story_media', related_query_name = 'story_media')
    file = models.FileField(upload_to='story_media/', null=True)
    isTitlePicture = models.BooleanField(blank=False, null=True) 

# Story  Story Media Serializer
class Story_Media_Serializer (serializers.ModelSerializer):

    class Meta:
        model = Story_Media
        fields =  ('id','file','isTitlePicture',)


# Story  Serializer
class StoryCreateUpdateSerializer (serializers.ModelSerializer):
    story_media = Story_Media_Serializer(many=True)

    class Meta:
        model = Story
        fields …

我正在学习 react-redux。我在功能组件中使用 redux 有点挣扎。如何从功能组件调用操作。我看过一些使用 react hooks 的教程。这对我来说很有意义。但是这些教程调用动作类型而不是创建动作类型的函数。

我的情况：

包装容器：我从管理所有数据的包装容器组件传递给LoadedNavbar函数：

<LoadedNavbar isAuthenticated = {isAuthenticated} profile = {profile} />

功能组件：带有注销按钮的导航栏。应该在功能组件中调用注销操作。如何使操作创建logout器在此功能中可用？

import React, { Component } from "react";
import { logout } from "../../../../actions/auth";
import { Link } from "react-router-dom";

export function LoadedNavbar (props) {

    const {isAuthenticated, profile} = props


  return (

   <div> 

   <button onClick={this.props.logout} className="nav-link btn btn-info btn-sm text-light">Logout</button> 

   </div>

   )
}

行动

// LOGOUT USER
export const logout = () => (dispatch, getState) => { …

我有一个由几个其他组件（例如文本字段）组成的组件，当对文本字段进行输入时，所有其他组件都会重新呈现。我想防止重新渲染，只重新渲染实际更改的组件。我已经看到“useCallback”是执行此操作的正确方法，并且我已经看到了如何使用它。但是，我在让“useCallBack”为我的案例正常工作时遇到了一些麻烦。即使我以如下简单的方式进行设置，文本字段中输入的每个新字符都会导致按钮再次呈现。我没有看到我的错误。

请参阅沙箱中的工作示例。

const Button = () => {
  console.log("Button Rendered!");
  window.alert("Button Rendered");
  return <button onClick="">Press me</button>;
};

export default function App() {
  const [textInput, setTextInput] = useState("Hallo");

  const onChangeInput = useCallback(
    (e) => {
      setTextInput(e.target.value);
    },
    [textInput]
  );

  return (
    <div>
      <input
        type="text"
        onChange={onChangeInput}
        value={textInput}
      />
      <Button />
    </div>
  );
}

我很高兴任何校准。

如何正确拒绝createAsyncThunk. 我有一个异步函数来检查邮件地址是否已存在。如果没有注册的邮件地址，则该函数的响应为空字符串；如果用户存在，则该函数的响应为注册用户的用户对象。

export const checkIfEmailExists = createAsyncThunk(
  "user/checkIfEmailExists",
  async (mail) => {
    const response = await mailExists(mail).promise();
    if (response.user && response.user.length > 0) {
      reject();
    } else {
      resolve();
    }
  }
);

在这两种情况下，数据都会返回并且不会发生错误。createAsyncThunk在这种情况下我该如何拒绝？

我正在处理音频文件上传，并希望在上传开始之前音频文件可用于音频播放器：1) 用户选择音频文件，2) 音频文件可供收听（作为预览）， 3）如果一切正常，用户按下提交。

我完成了第一步，基本上创建了一个文件输入（有效）。但是，当我将所选音频文件链接到音频播放器时，它不可用。现在我想知道我是否做错了什么，或者我对音频预览的工作原理是否有错误的想法。

export class AudioUploadView extends Component {

constructor(props) {
    super(props);
    this.onClickResetAudioFile = this.onClickResetAudioFile.bind(this)
    this.onChangeAudioFile = this.onChangeAudioFile.bind(this)
    this.inputRef = React.createRef();


  this.state = {
    selectedFile: null
  };

}

onChangeAudioFile(e){

  this.setState({selectedFile: e.target.files [0]}, () => {
    console.log (this.state.selectedFile)} );

  // pass file to props to make it available to parent component
  var data = e.target.files [0];
  this.props.AudioFileCallback(data);

  //console.log (data)
}


onClickResetAudioFile (e) {
 this.setState({selectedFile:null}); // celears state
 this.inputRef.current.value = "" // clears form

}

showResetButton(){
  if (this.state.selectedFile) {

    return …

我正在尝试使用 django Rest api 上传多个图像。我遵循了以下方法。但是，当我选择一个或多个文件并尝试将它们作为表单数据发送到服务器时，我收到以下错误消息：

AttributeError at /api/photo/ 'bytes' object has no attribute 'name'

模型：

class Photo(models.Model):
    image = models.ImageField(upload_to='audio_stories/')

序列化器：

class FileListSerializer ( serializers.Serializer ) :
    image = serializers.ListField(
                child=serializers.FileField( max_length=100000,
                                         allow_empty_file=False,
                                        use_url=False )
                                )
    def create(self, validated_data):
        image=validated_data.pop('image')
        for img in image:
            photo=Photo.objects.create(image=img,**validated_data)
        return photo

看法：

class PhotoViewSet(viewsets.ModelViewSet):
    serializer_class = FileListSerializer
    parser_classes = (MultiPartParser, FormParser,)
    queryset=Photo.objects.all()

网址

router.register('api/photo', PhotoViewSet, 'photocreate')

我不知道如何处理该错误，因为我的代码中没有任何与“名称”相关的内容？

建议使用哪种方式使用 RTK 查询按顺序执行多个突变？

  const [
    updateProfile, 
  ] = useUpdateProfileMutation();

  const [
    updatePost,
  ] = useUpdatePostMutation();


  const performMutipleMuations = async () => {
    const data= await updateProfile(newData);
    await updatePost(data);
  };

如何根据 Reanimated 库中的共享值触发 useEffect？

 const sharedValue = useSharedValue(0);
  useEffect(() => {
    console.log("exectue functions");
  }, [sharedValue.value]);

有没有这方面的最佳实践。或者是否有另一种方法可以根据共享值的更改来触发函数（同步和异步）。

在我提交包含数据字段和文件字段的表单后，仅清除数据字段，但保留上传的文件字段。看图：这里

OnChange 函数

    onChange = (e) => {
        if(e.target.name === 'audio') {
            this.setState({
                [e.target.name]: e.target.files[0], loaded: 0,
            }, () => console.log(this.state.audio))

        } else {

            this.setState({
                [e.target.name]: e.target.value
            }, () => console.log(this.state))
        }
    }

提交功能

      onSubmit = e => {
    e.preventDefault();
    let { title, content, audio} = this.state;
    //const story = { title, content, audio};
    let formDataStory = new FormData();
    formDataStory.append('audio', audio);
    formDataStory.append('title', title);
    formDataStory.append('content', content);
    this.props.addStory(formDataStory);
    this.setState({
      title: "",
      content:"",
      audio: ""
    });
  };

形式

  render() {
    const {title, …

我在地图（ react-native-maps ）上显示了一条路线（坐标数组）。我想检查路线的坐标是否在视口中以触发某些后续操作（或不触发）。

  const route = [
        {
            latitude: 41.38145,
            longitude: 2.17182,
        },
        {
            latitude: 41.38154,
            longitude: 2.17203,
        },
        {
            latitude: 41.38155,
            longitude: 2.17205,
        },
    ];

const MapDisplay = () => {
    const onRegionChange = (region) => {
     //searched function
        routeIsInViewport(region, route);
    };

    return <MapView onRegionChange={onRegionChange} />;
};

我想将相同长度的数组相乘。数组的总数 ( input.length) 已知，但可以是 0 到 n 之间的任意值。

const input = [
  [1, 2, 3, 4],
  [1, 2, 3, 4],
  [1, 2, 3, 4],
  [1, 2, 3, 4]
];

const output = [1, 16, 81, 256];
// 1*1*1*1, 2*2*2*2, 3*3*3*3, 4*4*4*4

我在 SO 上找到了通过将两个数组相互映射来相乘的解决方案，但不适用于 n 个数组。

我很感激任何提示。

我正在构建一个带有 Django Rest 后端和 React 前端的应用程序，并致力于授权和身份验证。身份验证效果很好，但是当我告诉前端用户有权对模型进行添加/编辑/查看/删除时，我有点卡住了。例如，如果用户无法编辑故事，我不想显示“编辑故事”按钮。

在处理 Django 文档时，我认为将用户的权限从 Django 后端发送到 React 前端是最简单的。因此我想序列化用户权限。

这是我的观点：

class UserAPI(generics.RetrieveAPIView):
  permission_classes = [
    permissions.IsAuthenticated, 
  ]
  serializer_class = UserSerializer

  def get_permissions(request):
    logged_in_user = request.user
    return Response(data=logged_in_user.get_all_permissions())

  def get_object(self):
    return self.request.user

这是我的序列化器：

class UserSerializer(serializers.ModelSerializer):
  class Meta:
    model = User
    fields = ('id', 'username', 'user_permissions')

用户型号：

class Profile(models.Model):
    user = models.OneToOneField(User, on_delete=models.CASCADE)
    image = models.ImageField(default='default.jpg', upload_to='profile_pics/')


    def __str__(self):
        return f'{self.user.username} Profile'

    def save(self, *args, **kwargs):
        super(Profile, self).save(*args, **kwargs)

        img = Image.open(self.image.path) …